html – Bootstrap多个jumbotrons

我正在尝试建立一个网站 – 我最初的想法 – 需要2个重叠的jumbotron – 使用bootstrap 3.
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类来使图像居中.

编辑在评论中删除每个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>

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…

原文地址：https://www.jb51.cc/html/225821.html