bootstrap css，如何在容器内制作全宽div

Question

I want to make this kind of layout with bootstrap framework:

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

I want a "container-fluid" div holding a "container" menu and it works fine, my problem is that I need to add a "full width" div just under the menu and I have no idea how to do this. Site content should have the "container" class while "full width" div "container-fluid", but I know that it's not possible to nest such classes.

how can I fix this with css keeping in mind that "menu" is fixed at top and "full width" div must scroll normally? I think I cannot use absolute positioning. I hope it's clear, otherwise I'll try to improve the question.

Answer 1

I would do three different containers, each one holds header, full width and site content accordingly

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

Answer 2

You can use positioning for this, and by using three different 'panels', you can position them wherever you wish on the page (and make them responsive, as well). For example:

 .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

It's pretty easy to do, but you can't put them all in 1 container class:

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

if you "fix" your menu to the top, just add a padding to your body for at least the height of the menu.

Answer 4

如果是全宽，那么只需将填充/边距设置为0（我知道这不是最佳做法）