Bootstrap多个jumbotrons
我试图建立一个网站 - 我最初的想法 - 需要2个重叠的jumbotron - 使用引导程序3. 1 jumbotron - 拉伸100％的宽度 - 传统的灰色着色。 1重叠 - 额外的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，但允许一个中央图像，可以响应屏幕的大小呢？
我可能没有完全理解你的问题，但对于在包装的超大屏幕.well ？
这给你一个在jumbotron里面的响应图像，并且给你你正在寻找的灰色封闭背景。 只需将.img-responsive类添加到图像中以使其响应，并确保它足够大以填充屏幕。 我添加了.center-block类来居中图像。
在评论中编辑删除每个OP的jumbotron填充
<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>
小提琴...
编辑：这会给你一个带有背景图片的jumbotron。 再次确保您使用的是大图片...
<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>
小提琴...
如果我找对了你，你不需要两个jumbotron。 你只需要指定你的图像作出响应。
<div class = "jumbotron">
<div class ="container>
<img src="your-image-source" class="img-responsive">
</div>
</div>
阅读有关响应图像的信息：http：//getbootstrap.com/css/#images
链接地址: http://www.djcxy.com/p/85201.html