Bootstrap多个jumbotrons

Question

我试图建立一个网站 - 我最初的想法 - 需要2个重叠的jumbotron - 使用bootstrap 3. 1 jumbotron - 拉伸100%的宽度 - 传统的灰色着色.1重叠 - 额外的jumbotron减少到'容器'大小 - 但这将有一个图像背景.

第一次尝试 - 重叠的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,但允许一个中央图像,也可以响应屏幕尺寸？

Answer 1

我可能不完全理解你的问题，但是将大屏幕包裹在 中怎么样.well？

这将为您提供大屏幕内的响应图像，并为您提供您正在寻找的灰色封闭背景。只需将.img-responsive类添加到您的图像中即可使其具有响应能力，并确保它的图像足够大以填充屏幕。我添加了该类.center-block以使图像居中。

编辑以删除评论中每个 OP 的巨型屏幕填充

<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>

小提琴...