Bootstrap 3 div jumbotron

我正在使用Bootstrap 3，并且遇到了一个让div坐在jumbotron头部的问题。我使用的超大屏幕类的给我一个完整的宽度，用如下背景图像响应头...Bootstrap 3 div jumbotron

<div class="container-fluid"> 
<div class="jumbotron"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-8">text here</div> 
     <div class="col-md-4">text here</div> 
     </div> 
    </div> 
</div>

这里是网站的其余部分...

<div class="container">rest of site goes here 
</div>

我想要做的是让我的整个网站/容器低于jumbotron - 向上滑动并覆盖它的一半高度。很显然，网站内容的容器已被清除，但我需要一个解决方案，将它放大约100px，以覆盖下半部分的jumbotron。

我已经尝试了z-index方法和绝对定位，但无法获得任何工作。有什么建议么？

与这里工作一个示例 - http://jsfiddle.net/9b9Da/7/

来源

2013-11-15 lowercase

有一个在引导3无'.container-fluid'规则，除非那是你自己的类样式。 – MackieeE

所以我可以删除包裹我上面的jumbotron的整个div？是啊。看起来像我可以。我现在可以'浮动;网站内容分布在巨型？ – lowercase

我需要将内容向上移动以覆盖jumbotron。例如，如果jumbo的高度是500px，那么我需要从页面顶部开始以250px开始的内容 - 而不是完全位于距顶部500px处的巨大范围内。有道理？ – lowercase

如在注释中规定，自举3不具有.container-fluid类，这是在自举2.3.2除去.rows在默认情况下全宽（移动第一种方法）。 position: relative当时用来抵消你的覆内容<div>在.jumbotron

<div class="jumbotron"> 
    <div class="col-md-8 jumbotext">text here</div> 
    <div class="col-md-4 jumbotext">text here</div> 
</div> 
<div class="container" id="content"> 
    <div class="row"> 
     This content needs to float over the Jumbotron above 
    </div> 
</div> 

<style> 
    #content { 
     position: relative; 
     bottom: 80px; 
     z-index: 500; 
     opacity: 0.6; 
    } 

    #content > .row { 
     min-height: 400px; 
     background: #cccccc; 
    } 

    .jumbotron > .jumbotext { 
     z-index: 700; 
    } 
</style>

Fiddle出现一半：http://jsfiddle.net/9b9Da/9/

来源

2013-11-15 21:33:39 MackieeE