Question

我正在使用Bootstrap 3，并且在让一个div坐在jumbotron标头上时遇到问题。我正在使用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/

Answer 1

正如评论中所述，Bootstrap 3没有.container-fluid类，它在Bootstrap 2.3.2中被删除，因为.rows默认为全宽（Mobile first方法）。然后使用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/

Answer 2

我正在使用bootstrap 3并且它有.container-fluid。它也列在bootstrap文档和W3中。

Bootstrap classes

Bootstrap 3 div over jumbotron

2 个答案: