bootstrap 3嵌套行

时间:2014-10-10 04:44:37

标签: css twitter-bootstrap twitter-bootstrap-3

由于在使用模板引擎(如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>

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

2 个答案:

答案 0 :(得分:3)

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

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

&#13;
&#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;
&#13;
&#13;

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

答案 1 :(得分:0)

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

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