如何在容器内制作全宽div

如何在容器内制作全宽div

本文介绍了bootstrap css,如何在容器内制作全宽div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

  | 

我想用引导框架做这种布局: |菜单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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:38