引导多个Jumbotron

Question

引导多个Jumbotron

7

我尝试构建一个网站，最初的想法是使用 Bootstrap 3 实现两个重叠的 jumbotron。第一个 jumbotron 占据整个宽度，采用传统的灰色颜色。第二个 jumbotron 只占据 container 的大小，并有一个图像背景。第一次尝试时，有重叠的 jumbotron，这使得图像能够响应式布局，但全宽 jumbotron 的大小与重叠图像的大小不匹配。

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

第二种方法-使用一个大容器，但这会导致我的图像无法响应：

<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，并允许一个居中的图像也能根据屏幕大小自适应呢？

- user289040

只是为了明确事情，您想要一个 jumbotron 跨越整个窗口的宽度，另一个跨越容器 div 的宽度，对吗？这样对吗？ - wbadart

是的 - 两者都是响应式的 - 其中一个与容器的宽度重叠，而容器的宽度与窗口相同。 - user289040

2个回答

1

你如果理解正确的话，就不需要两个巨幕。你只需要指定你的图片为响应式即可。

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

在这里阅读有关响应式图片的内容：http://getbootstrap.com/css/#images

- Said Kholov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- timgavin · Accepted Answer

我可能没有完全理解你的问题，但是将 jumbotron 包裹在 .well 中怎么样？这样可以在 jumbotron 内部获得响应式图片，并为您提供所需的灰色背景。只需将 .img-responsive 类添加到图像中使其响应式，并确保它是足够大的图像以填满屏幕。我添加了 .center-block 类来使图像居中。 根据评论编辑，删除了 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...