html - 引导多个巨无霸

我正在尝试使用Bootstrap 3建立一个站点-我最初的想法-需要2个重叠的巨型飞轮。
1个巨型飞轮-拉伸(stretch)了100％的宽度-传统的灰色。
1个重叠-减小到“容器”大小的附加巨型飞行器-但这将具有图像背景。

第一次尝试-使用重叠的巨型波谱仪-允许响应成像，但是全幅巨型波谱仪的尺寸与重叠图像的尺寸不匹配。

<div class = "jumbotron">
<div class ="jumbotron container>//image
 <p>Sample text</p>
</div>
</div>

第二种方式-使用1个超大加速器-但是，这随后阻止了我的图像响应:

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

是否有一个简单的替代方法允许全宽超大波管但也允许一个中心图像也可以响应屏幕尺寸？

最佳答案

我可能无法完全理解您的问题，但是如何将超大包装盒包裹在.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>

Fiddle...

编辑:这将为您提供一个带有背景图像的巨型飞船。同样，请确保您使用的是大图像...

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

Fiddle...

关于html - 引导多个巨无霸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30132213/