我正在尝试建立一个网站 – 我最初的想法 – 需要2个重叠的jumbotron – 使用bootstrap 3.
1个jumbotron – 拉伸100％的宽度 – 传统的灰色着色.
1重叠 – 额外的jumbotron减少到’容器’大小 – 但这将有一个图像背景.
1个jumbotron – 拉伸100％的宽度 – 传统的灰色着色.
1重叠 – 额外的jumbotron减少到’容器’大小 – 但这将有一个图像背景.
第一次尝试 – 重叠的jumbotron – 这允许响应式成像,然而全宽度的超大屏幕的尺寸然后与重叠图像的尺寸不匹配.
<div class = "jumbotron"> <div class ="jumbotron container>//image <p>Sample text</p> </div> </div>
第二种方式 – 使用1个jumbotron – 然而这会阻止我的图像响应：
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<div class="jumbpic">
<img src="style/images/car2.png"></div></div>
<div class="col-md-4">
<p>Sample text</p>
是否有一个简单的替代方案允许全宽度的jumbotron,但允许一个中央图像,也可以响应屏幕尺寸？
解决方法
我可能没有完全理解你的问题,但是如何将jumbotron包裹在.well中呢？
这样可以在jumbotron内部为您提供响应图像,并为您提供您正在寻找的灰色封闭背景.只需将.img响应类添加到您的图像中以使其响应,并确保它是一个足够大的图像来填充屏幕.我添加了.center-block类来使图像居中.
<style>
.jumbotron {
padding-top: 0;
}
</style>
<div class="well">
<div class="jumbotron">
<img src="http://placehold.it/1920x800" class="img-responsive center-block">
<p>Sample text</p>
</div>
</div>
编辑：这将为您提供带背景图像的超大屏幕.再次,确保您使用的是大图…
<style>
.jumbotron {
background: url('http://p1.pichost.me/i/59/1828782.jpg');
color: white;
}
</style>
<div class="well">
<div class="jumbotron">
<div class="container">
<h1>Hello,world!</h1>
<p>Sample text</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
