css – 带位置的Bootstrap容器,绝对丢失布局

我正在开发网站,反对最新的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如果您希望它具有与第一个容器相同的边距.

绝对的元素在文档中没有获得任何空间.这意味着它在定位后不会留下空的空间.您可以随后使用左,右,上,下的属性放置该框.

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