Bootstrap 3 div over巨无霸 [英] Bootstrap 3 div over jumbotron

问题描述

我正在使用Bootstrap 3，但让div放在巨型机头上时遇到了问题.我正在使用jumbotron类为我提供全宽的响应式标题，并带有以下背景图片...

I am using Bootstrap 3, and have a problem getting a div to sit over a jumbotron header. I am using the jumbotron class to give me a full width, responsive header with a background image as below...

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

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

Here is the rest of the site...

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

我想做的是让我的整个站点/容器都在巨型飞机下面-向上滑动并覆盖一半的高度.显然，网站内容的容器已清除在巨无霸下方，但我需要一种解决方案来将其提高到约100像素，以覆盖巨无霸的下半部分.

What I want to do is have my entire site/container BELOW the jumbotron - slide up and cover half of it's height. Obviously as is, the container for the site content is cleared below the jumbotron, but i need a solution to get it up about 100px to cover the lower half of jumbotron.

我已经尝试了z-index方法和绝对定位，但是都无法正常工作.有什么建议吗?

I have tried both z-index methods and absolute positioning but can't get either to work. Any suggestions?

可在此处使用的示例- http://jsfiddle.net/9b9Da/7/

推荐答案

如注释中所述，Bootstrap 3没有 .container-fluid 类，该类已在Bootstrap 2.3.2中删除.因为 .rows 默认情况下为全角(移动优先方式).然后使用 position:relative 偏移您的上层内容< div> ，使其出现在 .jumbotron

As stated in comments, Bootstrap 3 doesn't have a .container-fluid class, which was removed in Bootstrap 2.3.2 as .rows are full width by default (Mobile first approach). position: relative was then used to offset your overlying content <div> to appear half way over the .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>

小提琴 : 查看全文