Question

我很好奇，如果我需要在行类div中的结果网格中包装每一行。在我的情况下，结果是相同的尺寸。所以我会：

<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>

如果我在创建网格时使用行有什么特别的好处吗？像这样：

<div class="row">
    <div class="col-md-4">
    ...
    </div>
    <div class="col-md-4">
    ...
    </div>
    <div class="col-md-4">
    ...
    </div>
</div>
<div class="row">
    <div class="col-md-4">
    ...
    </div>
    <div class="col-md-4">
    ...
    </div>
    <div class="col-md-4">
    ...
    </div>
</div>

我理解其他类型的布局，其中内容不均匀，那么行是必不可少的。但同样假设相同的尺寸是第一种可以接受的方法吗？

Answer 1

根据我的理解：

.row为您提供两种风格：

margin-right: -15px;
margin-left: -15px;

这使容器样式的效果无效：

padding-right: 15px;
padding-left: 15px;

因此，有必要使用row来确保覆盖container样式。它还提供了在各种媒体查询中设置width的其他样式。

没有硬性规定你应该加入它。虽然最好包含它以避免意外结果并添加其他样式。

Answer 2

没有必要，但这是更好的做法。

.row实际上做的是它＆＃34;无效＆＃34;来自第一列的padding-left和来自最后一列的padding-right margin: 0 -15px;

使用.row可以创建填充整个.container的页面。否则，您将浪费30px的视口宽度，这在视口的总宽度仅为320px时会出现问题。

创建嵌套网格时也很方便。如果你不在.row中包装你的列，你将最终得到填充：0 15px;在你的嵌套＆＃34;行＆＃34;。嵌套列应该看起来像这样，除非你想在两边都有15px的填充：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-4></div>
        <div class="col-md-8></div>
      </div>
    </div>
    ...
  </div>
</div>

是否有必要在Bootstrap的行类中包含行？

2 个答案: