html - Bootstrap 多个超大屏幕

Question

我正在尝试建立一个网站，我最初的想法是需要 2 个重叠的超大屏幕 - 使用 bootstrap 3。 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>

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

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>

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