将容器类嵌套在Bootstrap 3中的容器流体类中？ [英] Nesting a container class inside a container-fluid class in Bootstrap 3?
问题描述
除了填充问题，为什么不建议在.container-fluid中嵌套.container？
如果您将子容器填充为零（如我的代码所示），效果与一个容器相同。此外，似乎有变化的完整和固定宽度的布局是很普遍的，这些天。我知道文档说明（ LINK ），但我很好奇，如果有人知道除了填充问题，保证不推荐这种实施。是额外的标记还是其他我缺少？
我问的原因是我最近在一些网站上实现了这一点，并且在我做的测试中没有发现明显的问题。我想知道是否还有其他潜在的问题潜伏着，我会考虑停止这种做法。
CSS / p>
.container-fluid .container {
padding-left：0;
padding-right：0;
}
HTML
< div class =container-fluidstyle =background-color：aliceblue;>
< div class =row>
< div class =col-xs-12>
< div class =container>
< div class =row>
< div class =col-xs-6style =background-color：violet>使用此文档可快速启动任何新项目。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< div class =col-xs-6style =background-color：lightblue>使用此文档作为快速启动任何新项目的方法。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< / div>
< / div>
< / div>
< / div>
< div class =row>
< div class =col-xs-4style =background-color：pink>使用此文档作为快速启动任何新项目的方法。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< div class =col-xs-4style =background-color：red>使用此文档作为快速启动任何新项目的方法。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< div class =col-xs-4style =background-color：blue>使用此文档作为快速启动任何新项目的方法。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< / div>
< / div>
在研究这个问题后，我想我对这个问题有很好的答案。根据我发现的内容， Bootstrap文档和在Bootstrap网站上的示例与容器类不能嵌套的建议相矛盾。这是在repo中的确认。因此，似乎在嵌套容器和由嵌套容器导致的填充问题的文档中的建议是这个问题的唯一真正的关注，因为我没有发现它的其他问题。
在回购中，我发现另一个潜在解决方案建议更改嵌套容器上的边距。但我认为我的解决方案的零填充子容器填充，如在这个初始问题，概述一点更实用和直接，因为没有额外的标记需要实现所需的影响。我将包括回购的利润率解决方案，供参考。它基本上涉及向父容器添加一个固定类，然后在父容器内的每个嵌套容器上应用负左和右边距。请注意，此解决方案不适用于嵌套在容器流体中的容器实例。
$ $ <$> $ <$>$ b
b HTML
$ b
< div class = >
< div class =container>
< div class =container>
< div class =container>< / div>
< / div>
< / div>
< / div>
CSS
.container.fixed .container {
margin-left：-15px;
margin-right：-15px;
}
包含在流体中的CONTAINERS p>
CSS
.container-fluid。 container {
padding-left：0;
padding-right：0;
}
HTML
< div class =container-fluidstyle =background-color：aliceblue;>
< div class =row>
< div class =col-xs-12>
< div class =container>
< div class =row>
< div class =col-xs-6style =background-color：violet>使用此文档可快速启动任何新项目。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< div class =col-xs-6style =background-color：lightblue>使用此文档作为快速启动任何新项目的方法。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< / div>
< / div>
< / div>
< / div>
< div class =row>
< div class =col-xs-4style =background-color：pink>使用此文档作为快速启动任何新项目的方法。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< div class =col-xs-4style =background-color：red>使用此文档作为快速启动任何新项目的方法。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< div class =col-xs-4style =background-color：blue>使用此文档作为快速启动任何新项目的方法。所有你得到的是这个文本和一个大部分准系统的HTML文档。< / div>
< / div>
< / div>
总而言之，虽然不推荐，但很容易嵌套容器上下文实际上可能是有用的，例如在布局具有不同的固定和全宽度内容的情况下。但是，必须仔细考虑和调整，以解决嵌套容器引起的填充问题。
Aside from the padding issue, why is it not advisable to nest .container in .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?
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
.container-fluid .container {
padding-left:0;
padding-right:0;
}
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>
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 documentation and the examples on the Bootstrap website contradict the recommendation that the container classes cannot be nested. This is acknowledged in 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.
In the repo I found another potential solution that 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.
CONTAINERS NESTED IN CONTAINERS
HTML
<div class="container fixed">
<div class="container">
<div class="container">
<div class="container"></div>
</div>
</div>
</div>
CSS
.container.fixed .container {
margin-left: -15px;
margin-right: -15px;
}
CONTAINERS NESTED IN CONTAINER-FLUID
CSS
.container-fluid .container {
padding-left:0;
padding-right:0;
}
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.
这篇关于将容器类嵌套在Bootstrap 3中的容器流体类中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
