我正在开发网站,反对最新的Bootstrap版本3.3.2.我的任务是创建导航,位于其他内容的顶部(简单的滚动菜单上的悬停).对于此菜单,我想使用Bootstrap列.
要将容器流体放在其他容器的顶部,我需要从标准流程中删除它.所以需要使用position：absolute.一旦我应用到容器流体(或包裹在它周围),它失去100％的宽度,整个内部的布局丢失.
如果我从.container-fluid(我的case中的#menu)中移除了position：absolute,那么它将返回布局,但不会从标准流中删除.
JSFiddle只有这种情况：http://jsfiddle.net/q6v9wv31/
HTML：
<div class="container first">
<div class="row">
<div class="col-xs-12">
<p>Content here</p>
</div>
</div>
</div>
<div class="container ontop">
<div class="row">
<div class="col-xs-6">
<p>Menu Item 1</p>
</div>
<div class="col-xs-6">
<p>Menu Item 2</p>
</div>
</div>
</div>
CSS：
body {
margin: 10px;
}
.first {
height: 200px;
background-color: #ddd;
}
.ontop {
height: 100px;
background-color: #d00;
position: absolute;
top: 100px;
}
当前版本的项目：http://html.accuraten.com/ssc-html-dev/public/
请帮我理解,如何解决这个任务.
解决方法
如果要将位置设置为绝对值,并希望具有100％的宽度,则应设置左右CSS样式：
HTML：
<div class="container first">
<div class="row">
<div class="col-xs-12">
<p>Content here</p>
</div>
</div>
</div>
<div class="ontop container">
<div class="row">
<div class="col-xs-4">
<p>Menu Item 1</p>
</div>
<div class="col-xs-4">
<p>Menu Item 2</p>
</div>
<div class="col-xs-4">
<p>Menu Item 2</p>
</div>
</div>
</div>
CSS：
body {
margin: 10px;
}
.first {
height: 200px;
background-color: #ddd;
}
.ontop {
height: 100px;
background-color: #d00;
position: absolute;
top: 100px;
right: 0;
left: 0;
}
更改左：0和右：0到10px如果您希望它具有与第一个容器相同的边距.
绝对的元素在文档中没有获得任何空间.这意味着它在定位后不会留下空的空间.您可以随后使用左,右,上,下的属性放置该框.
