twitter-bootstrap 超大屏幕上的 Bootstrap 3 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20010527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 div over jumbotron
提问by lowercase
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...
我正在使用 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>
Here is the rest of the site...
这是网站的其余部分...
<div class="container">rest of site goes here
</div>
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.
我想要做的是将我的整个站点/容器放在超大屏幕下方 - 向上滑动并覆盖其高度的一半。显然，站点内容的容器在超大屏幕下方被清除，但我需要一个解决方案将其提升约 100 像素以覆盖超大屏幕的下半部分。
I have tried both z-index methods and absolute positioning but can't get either to work. Any suggestions?
我已经尝试了 z-index 方法和绝对定位，但都无法正常工作。有什么建议？
A SAMPLE TO WORK WITH HERE - http://jsfiddle.net/9b9Da/7/
在这里使用的示例 - http://jsfiddle.net/9b9Da/7/
采纳答案by MackieeE
As stated in comments, Bootstrap 3 doesn't have a .container-fluidclass, which was removed in Bootstrap 2.3.2 as .rowsare full width by default (Mobile first approach). position: relativewas then used to offset your overlying content <div>to appear half way over the .jumbotron
如评论中所述，Bootstrap 3 没有一个.container-fluid类，该类在 Bootstrap 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>
回答by Paul
I'm using bootstrap 3 and it has .container-fluid. It's also listed in the bootstrap docs and on the W3.
我正在使用 bootstrap 3，它有 .container-fluid。它也列在 bootstrap 文档和 W3 上。
