Question

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

第一次尝试 - 使用重叠的超大屏幕 - 这允许响应式成像，然而全宽度的超大尺寸的尺寸与重叠图像的尺寸不匹配。

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

是否有一个简单的替代方案允许全宽度的jumbotron，但允许中心图像也可以响应屏幕尺寸？

Answer 1

我可能不完全理解你的问题，但是如何将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>

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

Answer 2

如果我找对你，你不需要两个jumbotrons。您只需要指定您的图像即可响应。

<div class = "jumbotron">
    <div class ="container>
         <img src="your-image-source" class="img-responsive">
    </div>
</div>

在此处阅读有关响应式图片的信息：http://getbootstrap.com/css/#images

Bootstrap多个jumbotrons

2 个答案: