Bootstrap 具有 position:absolute 的容器内部布局丢失

Question

我正在根据最新的 Bootstrap 版本 3.3.2 开发网站。我的任务是创建导航，它位于其他内容之上（悬停时简单的滚动菜单）。对于此菜单，我想使用 Bootstrap 列。

要将 .container-fluid 放置在其他容器之上，我需要将其从标准流程中删除。所以需要使用position:absolute。一旦我将它应用到 .container-fluid（或它周围的包装器），它就会失去 100% 的宽度并且整个内部布局都会丢失。

如果我从 .container-fluid 中删除 position:absolute （#menu 在我的情况），它返回布局，但未从标准流程中删除。

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/

请帮助我理解如何解决这个任务。

Answer 1

如果要将位置设置为绝对位置并希望其宽度为 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。

绝对定位的元素不会在文档中获得任何space。这意味着它在定位后不会留下空的space。您随后可以使用属性左、右、上和下来放置框。

http://html.net/tutorials/css/lesson14.php#s2

Bootstrap 具有 position:absolute 的容器内部布局丢失

Bootstrap container with position:absolute loses layout inside

css

css-position

twitter-bootstrap