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

82

我的理解是所有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”？什么时候/为什么？
css  twitter-bootstrap 
— me
source
1
如果您使用的是全角轮播，则其中有用于字幕的容器，因此不应放在容器中。因此，您可以在其上方有一个容器，在其下方有一个容器。
— Aibrean 2014年
1
尽管@Christina是正确的，因为文档说您不嵌套容器，但有时它是有用且有用的。有关嵌套的其他信息，请参见stackoverflow.com/questions/29660034/…。
— gidmanma

Answers:

80

  1. 页面的某些部分将覆盖整个视口宽度，而其他部分则不会。某些背景将是全角，但内容不会。

    这样的一个示例是特征区域，该区域的背景图像或颜色是视口的整个宽度，但是其中的内容，形式或其他内容.container在任何给定的视口宽度下都不会超过。

  2. 您不嵌套.container或.container-fluid-请参阅文档。这不是必需的。

    文档：Bootstrap需要包含元素来包装站点内容并容纳我们的网格系统。您可以选择在项目中使用的两个容器之一。请注意，由于填充等原因，这两个容器都不可嵌套[也不意味着.container和.container-fluid不会嵌套]。

— 克里斯蒂娜（Christina）
source
4
.container-fluid当主网站位于时，我经常会使用导航栏或类似横幅的广告.container。
— DavidG 2014年
3
@DavidG是的，然后您进行了两次填充。文档：Bootstrap需要包含元素来包装站点内容并容纳我们的网格系统。您可以选择在项目中使用的两个容器之一。请注意，由于填充等原因，这两个容器都不可嵌套。getbootstrap.com/css
— 克里斯蒂娜（Christina）
1
@DavidG。我不使用.container-fluid，除非直接的孩子是.row和各列。
— 克里斯蒂娜（Christina）2014年
1
我也没有。我的意思是，我将拥有一个带有导航栏的流体容器，以便它从屏幕边缘渗出，然后在容器关闭标签后，启动一个包含主要内容的新的非流体容器。
— DavidG 2014年
1
要在这里做出很大的区分-也许不应该直接嵌套它们，但是可以嵌套它们，并且在某些情况下需要嵌套。假设我在主容器中有一个填充的面板div，它不是行或列-在这种情况下，我需要一个.container-fluid类来围绕面板中的行/列；否则，我将获得一个水平滚动条（除非面板内部的溢出设置为隐藏-但我可能不希望这样做，如果内部有很多数据（也许是一张宽桌子），我可能想要一个滚动条）。
— jbyrd
0

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

Bootstrap容器有一个限制，如果您要查找12列限制，10像素填充挑战，那么这是非本地的（内置CSS的，用户需要将其下载到他/她的机器上），并且是最重要的您需要处理的潜水。

考虑到所有这些，请尝试切换到CSS网格 这里是一个不错的起点。

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

— 费拉斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.