我正在根據最新的引導版本3.3.2開發網站。我的任務是創建導航，這是定位在其他內容的頂部(懸停時簡單的滾動菜單)。對于這個菜單，我想使用引導列。

就位。容器-流體在其他容器的頂部，我需要將它從標準流中移除。所以需要用位置:絕對。一旦我把這個應用到。容器-流體(或其周圍的包裝)，它失去了100%的寬度和內部的整個布局丟失。

如果我移除位置:絕對距離。container-fluid(在我的例子中是#menu)，它返回布局，但是沒有從標準流中刪除。

js只擺弄這個案例: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樣式和右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;
}

如果希望它與第一個容器具有相同的邊距，請將left: 0和right: 0更改為10px。

位于絕對位置的元素在文檔中沒有任何空格。這意味著它在定位后不會留下空白。隨后，您可以使用屬性left、right、top和bottom來放置該框。

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

這是一個老問題，但請注意:

您可以使用justify-content類，例如:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-md-6">
      [YOUR CONTENT]
    </div>
  </div>
</div>

有關更多信息和示例，請查看bootstrap文檔中的flex部分。