Html 在 Bootstrap 3 的容器流体类中嵌套容器类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29660034/
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
Nesting a container class inside a container-fluid class in Bootstrap 3?
提问by Opaw Nako
Aside from the padding issue, why is it not advisable to nest .container in .container-fluid?
除了填充问题，为什么不建议将 .container 嵌套在 .container-fluid 中？
If you zero the child container padding (as shown in my code below), the effect is the same as having one container anyway. Also, it seems that having varying full and fixed width layout is pretty common these days. I know what the documentation says (LINK), but I am curious if anyone knows of anything other than the padding issue that warrants this implementation not being recommended. Is it the additional markup or something else I am missing?
如果您将子容器填充为零（如下面的代码所示），则效果与无论如何都具有一个容器相同。此外，现在似乎具有不同的全宽和固定宽度布局非常普遍。我知道文档说了什么（LINK），但我很好奇是否有人知道除了填充问题之外的任何其他内容，从而保证不推荐此实现。是额外的标记还是我缺少的其他东西？
The reason I ask is that I have this implemented on a number of sites recently and seen no apparent problems with it in the testing that I have done. I am wondering if there are some other potential problem(s) lurking that would be cause for me to consider stopping this practice.
我问的原因是我最近在许多站点上实现了这个，并且在我所做的测试中没有发现明显的问题。我想知道是否还有其他一些潜在的问题会导致我考虑停止这种做法。
CSS
CSS
.container-fluid .container {
padding-left:0;
padding-right:0;
}
HTML
HTML
<div class="container-fluid" style="background-color:aliceblue;">
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
<div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
<div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
<div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
</div>
</div>
回答by Opaw Nako
After researching this issue, I think I have a good answer to this question. Based on what I have found, it appears that the Bootstrap documentationand the examples on the Bootstrap websitecontradict the recommendation that the container classes cannot be nested. This is acknowledgedin the repo as well. So it appears that the recommendation in the documentation about nesting containers and resulting padding issue caused by nested containers is the only real concern with this problem, as I have found no other issues with it.
在研究了这个问题之后，我想我对这个问题有一个很好的答案。根据我的发现，Bootstrap 文档和Bootstrap 网站上的示例似乎与容器类不能嵌套的建议相矛盾。这在回购中也得到了承认。因此，文档中关于嵌套容器和由嵌套容器引起的填充问题的建议似乎是这个问题唯一真正关心的问题，因为我没有发现其他问题。
In the repo I found another potential solutionthat recommended altering margins on nested containers. But I think my solution of zeroing out the child container padding, as outlined in this initial question, is a bit more practical and straight forward since no additional markup is needed to achieve the desired affect. I will include the margins solution from the repo here for reference. It basically involves adding a fixed class to the parent container then applying negative left and right margins on every nested container within the parent. Note that this solution does not apply to instances of containers nested in container-fluid. Only to containers nested in other containers.
在 repo 中，我发现了另一个潜在的解决方案，建议更改嵌套容器的边距。但我认为我的解决方案将子容器填充清零，如这个初始问题中所述，更实用和直接，因为不需要额外的标记来实现所需的效果。我将在此处包含 repo 中的边距解决方案以供参考。它基本上涉及向父容器添加一个固定类，然后在父容器中的每个嵌套容器上应用负的左右边距。请注意，此解决方案不适用于嵌套在 container-fluid 中的容器实例。仅适用于嵌套在其他容器中的容器。
CONTAINERS NESTED IN CONTAINERS
嵌套在容器中的容器
HTML
HTML
<div class="container fixed">
<div class="container">
<div class="container">
<div class="container"></div>
</div>
</div>
</div>
CSS
CSS
.container.fixed .container {
margin-left: -15px;
margin-right: -15px;
}
CONTAINERS NESTED IN CONTAINER-FLUID
嵌套在容器流体中的容器
CSS
CSS
.container-fluid .container {
padding-left:0;
padding-right:0;
}
HTML
HTML
<div class="container-fluid" style="background-color:aliceblue;">
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
<div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
<div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
<div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
</div>
</div>
To conclude, although it is not recommended, it is easily possible to nest containers and in the right context it can actually be useful, such as in instances where a layout has varying fixed and full width content. But careful consideration and adjustments must be made to account for the padding issue that arises from nesting containers.
总而言之，虽然不建议这样做，但很容易嵌套容器，并且在正确的上下文中它实际上很有用，例如在布局具有不同的固定和全宽内容的情况下。但是必须仔细考虑和调整以解决嵌套容器引起的填充问题。
