bootstrap css，如何在容器内制作全宽div [英] bootstrap css, how to make full width div inside container

问题描述

  | 
我想用引导框架做这种布局： |菜单x | | 
 ------------------------- 
 ** **全宽** ** 
 --- ---------------------- 
 | |网站内容| | 
 | | | | 
 | | | | 
 | | | | 
 | | | | 
 | | | | 
 | | | | 
 | | | | 
 | | | | 
 ------------------------- 
  

我想要一个容器流体div来容纳一个容器菜单，它工作正常，我的问题是我需要在菜单下添加一个全宽div，并且我没有想法如何做到这一点。
网站内容应该有容器类，而全宽div容器流体，但我知道这是不可能嵌套这样的类。

我怎样才能解决这个与CSS记住，菜单固定在顶部和全宽div必须正常滚动？我想我不能使用绝对定位。我希望这很清楚，否则我会尽力改善这个问题。

解决方案

$ b $我会做三个不同的容器，每一个容器都包含标题，全宽和网站内容。 b

 < div class =container>< / div> <！ - 此处的标题 - > 
< div>< / div> <！ - 此处为全宽 - > 
< div class =container>< / div> <！ - 此处的网站内容 - > 
  

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.

解决方案

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 -->

这篇关于bootstrap css，如何在容器内制作全宽div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！