bootstrap css，如何在容器內制作全寬div

Question

我想用bootstrap框架進行這種布局：

    |   | menu       x |    |
    -------------------------
    ** **  full width  ** **
    -------------------------
    |   | site content |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    -------------------------

我想要一個“容器流體”div拿着一個“容器”菜單，它工作正常，我的問題是我需要在菜單下添加一個“全寬”div，我不知道如何做到這一點。 網站內容應該有“容器”類，而“全寬”div“容器 - 流體”，但我知道嵌套這樣的類是不可能的。

我如何用css解決這個問題，記住“菜單”固定在頂部，“全寬”div必須正常滾動？ 我想我不能用絕對定位。 我希望它很清楚，否則我會嘗試改進這個問題。

Answer 1

我會做三個不同的容器，每個容器相應地保存標題，全寬和網站內容

<div class="container"></div> <!-- header here -->
<div></div> <!-- full width here -->
<div class="container"></div> <!-- site content here -->

Answer 2

您可以使用定位，通過使用三個不同的“面板”，您可以將它們放在頁面上的任何位置（並使它們響應）。 例如：

 .html, body { margin: 0; padding: 0; } .container { width: 100%; min-height: 100vh; background: rgba(0, 0, 0, 0.2); position: relative; } .leftpanel,.rightpanel { width: 20%; min-height: 100vh; position: absolute; top: 0; left: 0; background: lightgray; } .rightpanel { left:auto; right: 0; } .content { width: 60%; min-height: 100vh; position: absolute; top: 0; left: 20%; background: gray; } 

 <div class="container"> <div class="leftpanel">Left Side</div> <div class="content">Body container</div> <div class="rightpanel">Right Container</div> </div> 

Answer 3

它很容易做到，但你不能將它們全部放在1個容器類中：

header.container
   ... menu
div.container-fluid
   ... banner
div.container
   ... content

如果您將菜單“固定”到頂部，只需在您的身體上添加一個填充至少高度的菜單。

Answer 4

如果是全寬，那么只需將填充/邊距設置為0（我知道這不是最佳做法）