CSS 多个和/或嵌套的 Bootstrap 容器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26469332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple and/or nested Bootstrap containers?
提问by smeeb
My understandingis that all Bootstrap-styled elements must exist inside a <div class="container">element. But sometimes I see Bootstrap examples where there are multiple "containers":
我的理解是所有 Bootstrap 样式的元素都必须存在于一个<div class="container">元素中。但有时我会看到 Bootstrap 示例，其中有多个“容器”：
<div class="container">
<!-- Blah, GUI stuff, blah -->
</div>
...
<div class="container">
<!-- Blah, more GUI stuff, blah -->
</div>
My questions:
我的问题：
- When would you ever need a single HTML page with multiple "container divs"? What benefit does this offer as opposed to just putting the entire body inside one big "container div"?
- Would you ever want to nest "container divs" inside other ones? When/why?
- 您什么时候需要一个带有多个“容器 div”的 HTML 页面？与将整个身体放在一个大的“容器 div”中相比，这有什么好处？
- 您是否想将“容器 div”嵌套在其他容器中？什么时候/为什么？
采纳答案by Christina
Some sections of the page will span the full viewport width and others won't. Some backgrounds will be the full width but the content won't.
An example of this is a featurette area which has a background image or color that is the full width of the viewport but the content inside that, forms or whatever, don't exceed the
.containerat any given viewport width.You don't nest
.containeror.container-fluid-- see the docs. It's not necessary.Docs: Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable [neither means that .container and .container-fluid are NOT to be nested].
页面的某些部分将跨越整个视口宽度，而其他部分则不会。一些背景将是全宽，但内容不会。
一个例子是一个特征区域，它的背景图像或颜色是视口的全宽，但里面的内容、形式或其他东西不要超过
.container任何给定的视口宽度。您不嵌套
.container或.container-fluid- 请参阅文档。这不是必需的。文档：Bootstrap 需要一个包含元素来包装站点内容并容纳我们的网格系统。您可以选择两个容器之一在您的项目中使用。请注意，由于填充等原因，两个容器都不是可嵌套的 [也不意味着 .container 和 .container-fluid 不能嵌套]。
回答by BitByBit
Unlike what some have said, you can nest a container-fluidinside a container. There is even an example on the official bootstrap website:
与某些人所说的不同，您可以将container-fluida嵌套在container. 官方引导程序网站上甚至有一个示例：
回答by Patrick McDonald
In the Layout section of the 4.3 docs, https://getbootstrap.com/docs/4.3/layout/overview/#containers, it now states
在 4.3 文档的布局部分，https://getbootstrap.com/docs/4.3/layout/overview/#containers，现在说明
While containers canbe nested, most layouts do not require a nested container.
虽然容器可以嵌套，但大多数布局不需要嵌套容器。
Just be aware of what others have stated about padding, etc.
请注意其他人对填充等的说明。
回答by test
Actually its totally depends upon the requirement of the designer.
其实这完全取决于设计师的要求。
Some times you need full width of the row ( i mean to say viewport or a strip of visible part that you can achieved without separate container class )
有时您需要行的全宽（我的意思是说视口或可见部分的条带，您无需单独的容器类即可实现）
http://binarytheme.com/demos?theme=bootsrap-landing-page-blue
http://binarytheme.com/demos?theme=bootsrap-landing-page-blue
see above template example to understand
看上面的模板例子来理解
