引导多个 jumbotron答案

【问题标题】：Bootstrap multiple jumbotrons引导多个 jumbotron
【发布时间】：2015-05-10 01:21:59
【问题描述】：

我正在尝试构建一个站点 - 我最初的想法 - 需要 2 个重叠的 jumbotron - 使用引导程序 3。 1 jumbotron - 拉伸 100% 的宽度 - 传统的灰色着色。 1 个重叠 - 额外的 jumbotron 缩小到“容器”大小 - 但这将具有图像背景。

第一次尝试 - 使用重叠的 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 跨越窗口的宽度，另一个跨越容器 div 的宽度（？）对吗？
是的 - 都是响应式的 - 容器的宽度与窗口宽度的 jumbotron 重叠。

标签： html css twitter-bootstrap

【解决方案1】：

我可能没有完全理解你的问题，但是将 jumbotron 包裹在 .well 中怎么样？

这会在 jumbotron 内为您提供响应式图像，并为您提供您正在寻找的灰色封闭背景。只需将.img-responsive 类添加到您的图像以使其具有响应性，并确保它的图像足够大以填满屏幕。我添加了.center-block 类以使图像居中。

已编辑以删除 cmets 中每个 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...

【讨论】：

查看第一个示例和包含的小提琴 - 图像也水平居中。是否可以调整图像垂直居中但水平居中？非常感谢您的帮助
我不确定我是否理解“水平顶部”？由于.center-block 类，图像已经水平居中（左/右），默认情况下位于顶部。如果您希望它垂直居中，您可以添加 vertical-align: middle; 但是，您在图像上方或下方添加的任何文本都会抵消居中 - 它将不再居中。
我尝试将图像垂直居中，但无法让它在jumbotron 中正常工作，但它可以在.thumbnail 中工作：bootply.com/q11Y8M2A0c
很抱歉给您带来了困惑。您提供的初始代码 - 在查看小提琴时，图像垂直放置在中心 - 这正是我想要的。但是，在水平方向上，它会下降，这不是我需要的。我希望图片位于超大屏幕的最高点。希望这让它更清楚一点？
明白了。只需从 .jumbotron 类中删除顶部填充。我已经更新了我的答案以反映这一点。

【解决方案2】：

如果我没听错的话，你不需要两个 jumbotron。你只需要指定你的图片是响应式的。

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

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

【讨论】：