由于在使用模板引擎(如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>
或者他们是否应该再次被包装在容器中?
答案 0 :(得分:3)
您不应该在.container
元素中包装嵌套行,但应该将它们嵌套在列中。 Bootstrap的row
类具有负的左右边距,被col-X
类取消。正左右边距。如果您在没有中间row
类的情况下嵌套两个col-X
类,则会得到负边距的两倍。
此示例演示了双重负边距:
<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以精彩而有趣的细节解释了专栏系统。
答案 1 :(得分:0)
您不应将它们包装在另一个container中 - 容器是为典型的单页布局而设计的。除非它看起来很好/适合您的布局,否则如果您真的想这样做,可能需要查看container-fluid
。
tl; dr 不要换行另一个容器。