引导网格系统 - 我们可以在 .row 类中使用 2 col-*-12 吗？ [复制]

Question

从我在网上阅读的所有链接中，我了解到一个行类中所有 col 类的总和应该是 12。

但是，我看到人们在一行中使用多个 col-*-12 的情况。这是有效的引导语法吗？

例如-以下是VALID-

<div class="row">
  <div class="col-xs-6">
  </div>
  <div class="col-xs-6">
  </div>
</div>

以下也是有效的

<div class="row">
  <div class="col-xs-9">
  </div>
  <div class="col-xs-3">
  </div>
</div>

以下是否有效？

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

请给出正确的推理。

编辑： 感谢您让我知道它是有效的。谁能告诉我这样做是否是个好主意？ 或者可能是，执行以下操作会更好

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

两者中哪一个更好？

Answer 1

是的，它是有效的。根据doc

如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行。

更新：

如果您有不同的高度块并将所有内容放在一个行块中，您将得到不正确的行为。看到这个plunker

但如果您只使用col-X-12，那么使用row 类的方式并不重要。我认为对于col-X-12，您甚至可以跳过row 和col-X-12 课程。只需将所有内容放在常规的div 标签中，您将获得 100% 的宽度。