Question

由于在使用模板引擎（如twig（PHP）或jinja2（python））时继承了html部分，我可能需要嵌套如下的行：

<div class="container">
    <div class="row">
        <div class="row">
        </div>

        ...

        <div class="row">
        </div>
    </div>
    <div class="row">
        ...
    </div>
</div>

然后我应该在列div中包装内部行，如下所示：

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="row">
            </div>

            ...

            <div class="row">
            </div>
        </div>
    </div>
    <div class="row">
        ...
    </div>
</div>

或者他们是否应该再次被包装在容器中？

Answer 1

您不应该在.container元素中包装嵌套行，但应该将它们嵌套在列中。 Bootstrap的row类具有负的左右边距，被col-X类取消。正左右边距。如果您在没有中间row类的情况下嵌套两个col-X类，则会得到负边距的两倍。

此示例演示了双重负边距：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

<!-- GOOD! Second "row" wrapped in "col" to negate negative margins. -->
<div class="container">
    <div class="row">
        <div class="col-xs-12" style="background: lime;">
            <div class="row">
              Here's my text!
            </div>
        </div>
    </div>
</div>

<!-- BAD! Second "row" missing wrapping "col", gets double negative margins -->
<div class="container">
    <div class="row">
        <div class="row" style="background: tomato;">
          Where's my text?
        </div>
    </div>
</div>

＆＃13;

为了进一步阅读，The Subtle Magic Behind Why the Bootstrap 3 Grid Works以精彩而有趣的细节解释了专栏系统。

Answer 2

您不应将它们包装在另一个container中 - 容器是为典型的单页布局而设计的。除非它看起来很好/适合您的布局，否则如果您真的想这样做，可能需要查看container-fluid。

tl; dr 不要换行另一个容器。

bootstrap 3嵌套行

2 个答案: