多个和/或嵌套的Bootstrap容器?

时间:2014-10-20 15:28:13

标签: css twitter-bootstrap

我的理解是所有Bootstrap样式的元素必须存在于<div class="container">元素中。但有时我会看到Bootstrap示例中有多个“容器”:

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

我的问题:

  1. 您何时需要一个包含多个“容器div”的HTML页面?这提供了什么好处,而不是仅将整个身体放在一个大的“容器div”中?
  2. 您是否想要将“容器div”嵌入其他内容?当/为什么?

5 个答案:

答案 0 :(得分:71)

  1. 页面的某些部分将跨越整个视口宽度,而其他部分则不会。有些背景将是全宽,但内容不会。

    一个例子是一个featurette区域,其背景图像或颜色是视口的整个宽度,但其中的内容,形式或其他内容,在任何给定的视口中都不超过.container宽度。

  2. 您没有嵌套.container.container-fluid - 请参阅docs。没有必要。

      

    Docs:Bootstrap需要一个包含元素来包装网站内容   并安置我们的网格系统。您可以选择使用两个容器中的一个   在你的项目中。请注意,由于填充等原因,两者都没有   容器是可嵌套的[既不意味着.container和.container-fluid也不能嵌套]。

答案 1 :(得分:14)

与某些人所说的不同,您可以在container-fluid内嵌套container。官方自助网站上甚至有一个例子:

http://getbootstrap.com/examples/navbar/

答案 2 :(得分:4)

实际上它完全取决于设计师的要求。

有时你需要整行的宽度(我的意思是说视口或一条可见的部分你可以在没有单独的容器类的情况下实现)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

参见上面的模板示例以了解

答案 3 :(得分:1)

在4.3文档https://getbootstrap.com/docs/4.3/layout/overview/#containers的“布局”部分中,现在说明了

  

虽然可以嵌套容器 ,但是大多数布局都不需要嵌套容器。

只要知道其他人对填充等的说明即可。

答案 4 :(得分:0)

节省时间,并切换到 Css-grid 本机CSS网格。

Bootstrap容器有一个限制,如果您要查找12列限制,10像素填充挑战,那么这是非本地的(内置CSS),用户需要将其下载到他/她的计算机上,并且首先您需要处理的潜水次数。

请记住,尝试并切换到CSS网格 here is a good playground to start.

现在来到CSS-grid的缺点是,它仍然与IE不兼容。