我正在开发最新的Bootstrap版本3.3.2的网站。我的任务是创建导航，即定位在其他内容之上（悬停时简单的滚动菜单）。对于这个菜单，我想使用Bootstrap列。
要将**.container-fluid放置在其他容器的顶部，我需要将其从标准流中删除。所以需要使用position：absolute**。一旦我将此应用于**.container-fluid**（或其周围的 Package 器），它就会失去100%的宽度，并且内部的整个布局都会丢失。
如果我从**.container-fluid**（在我的例子中是**#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/
请帮助我了解，如何解决这个任务。
2条答案
按热度按时间a0zr77ik1#
如果你想将位置设置为绝对，并希望它有100%的宽度，你应该设置左右CSS样式：
HTML：
CSS：
向左更改：0和右：0到10px，如果您希望它与第一个容器具有相同的边距。
绝对位置的元素不会在文档中获得任何空间。这意味着它在定位后不会留下空白空间。随后可以使用特性left、right、top和bottom来放置长方体。
http://html.net/tutorials/css/lesson14.php#s2
xxslljrj2#
这是一个老问题，但记录在案：
你可以使用
justify-content类，例如：查看the flex part in the bootstrap documentation以获取更多信息和示例。