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

Question

我的理解是所有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"吗？当/为什么？

Answer 1

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

   这方面的一个例子是一个特征区域,其背景图像或颜色是视口的整个宽度,但其内部,形式或其他内容不超过.container任何给定视口宽度.

2. 你没有嵌套.container或.container-fluid- 看到文档.这不是必需的.

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

Answer 2

与有些人所说的不同,你可以在container-fluid里面筑巢container.官方bootstrap网站上甚至有一个例子:

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

Answer 3

在 4.3 文档的布局部分，https://getbootstrap.com/docs/4.3/layout/overview/#containers，现在说明

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

请注意其他人对填充等的说明。

Answer 4

其实这完全取决于设计师的要求。

有时您需要行的全宽（我的意思是说视口或可见部分的条带，您无需单独的容器类即可实现）

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

看上面的模板例子来理解