html – 在Bootstrap 3中将容器类嵌套在容器流体类中？

除了填充问题外,为什么不建议在.container-fluid中嵌套.container？

如果您将零容器填充(如我的代码如下所示),则效果与使用一个容器相同.此外,似乎具有不同的完整和固定宽度的布局是现在很常见的.我知道文档的内容(LINK),但如果有任何人知道除了填写问题之外的任何事情,我很好奇,这不需要推荐实施.这是额外的标记还是其他我失踪的东西？

我问的原因是我最近在许多网站上实现了这一点,在我所做的测试中没有发现任何明显的问题.我想知道是否还有一些潜在的潜在问题潜伏着,这将是我考虑停止这种做法的原因.

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>

Example on Bootply

解决方法

在研究这个问题之后,我认为我有一个很好的答案.根据我发现的情况,Bootstrap documentation和 examples on the Bootstrap website似乎与容器类不能嵌套的建议相矛盾.这也是 @L_403_4@在回购.因此,关于嵌套容器和由嵌套容器引起的填充问题的文档中的建议似乎是这个问题唯一真正关心的问题,因为我没有发现任何其他问题.

在回购中,我发现另一个potential solution建议更改嵌套容器的边距.但是,如我最初的问题所述,我认为我的清理子容器填充的解决方案更加实用和直接,因为不需要额外的标记才能达到预期的效果.我将从这个回购中包括利润率解决方案供参考.它基本上包括向父容器添加一个固定类,然后在父项中的每个嵌套容器上应用负的左边距和右边距.请注意,此解决方案不适用于嵌套在容器流体中的容器的实例.只适用于嵌套在其他容器中的容器.

集装箱内装集装箱

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;
}

Example on Bootply

集装箱内装入集装箱

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>

Example on Bootply

总而言之,尽管不建议,但是很容易嵌套容器,并且在正确的上下文中,实际上可以是有用的,例如在布局具有不同的固定和全宽内容的情况下.但是,必须仔细考虑和调整以解决嵌套容器产生的填充问题.

html – 在Bootstrap 3中将容器类嵌套在容器流体类中？

解决方法

猜你在找的HTML相关文章