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

ejk8hzay 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(6)|浏览(139)

我的 * 理解 * 是所有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”中相比，这有什么好处呢？
1.您是否曾经想要将“容器div”嵌套在其他容器div中？何时/为什么？

twitter-bootstrap

来源：https://stackoverflow.com/questions/26469332/multiple-and-or-nested-bootstrap-containers

6条答案

按热度按时间

70gysomp1#

1.页面的某些部分将跨越整个 windows 宽度，而其他部分则不会。某些背景将是整个宽度，但内容不会。
一个这样的例子是一个featurette区域，它的背景图像或颜色是视口的全宽，但其中的内容，表单或任何东西，在任何给定的视口宽度都不超过.container。
1.你不需要嵌套.container或者.container-fluid--参见文档。这不是必须的。
Docs：Bootstrap需要一个containing元素来 Package 站点内容并存放网格系统。您可以选择两个容器中的一个在您的项目中使用。请注意，由于填充等原因，这两个容器都不是可嵌套的[这也不意味着.container和.container-fluid不能被嵌套]。

赞(0）回复(0）举报 2022-12-07

kcugc4gi2#

不像有些人说的那样，你可以把container-fluid嵌套在container中。
http://getbootstrap.com/examples/navbar/

赞(0）回复(0）举报 2022-12-07

vbkedwbf3#

在4.3版文档的“布局”部分中，现在声明
虽然容器 * 可以 * 嵌套，但大多数布局不需要嵌套容器。
只是要注意其他人对填充等的陈述。

赞(0）回复(0）举报 2022-12-07

68bkxrlz4#

实际上它完全取决于设计者的要求。
有时你需要行的全宽（我的意思是说viewport或一条可见的部分，你可以实现没有单独的容器类）
http://binarytheme.com/demos?theme=bootsrap-landing-page-blue
请参阅上述模板示例以了解

赞(0）回复(0）举报 2022-12-07

cbjzeqam5#

保存您的时间并切换到Css-grid本地CSS网格。
Bootstrap容器有一个限制，如果你寻找12列限制，10像素填充挑战，添加到这不是本地的（CSS内置），用户需要下载到他/她的机器，在所有的顶部，你需要处理的潜水的数量。
记住所有这些，尝试一下，切换到CSS网格here is a good playground to start.
现在来看看CSS网格的缺点是仍然不兼容IE。

赞(0）回复(0）举报 2022-12-07

j13ufse26#