Question

从我在线阅读的所有链接中，我了解行类中所有col类的总和应为12。

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

例如 - 以下是有效 -

<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>

以下是VALID吗？

<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

是的，它是有效的。根据{{3}}

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

更新：

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

但是如果仅使用col-X-12，则使用row类的方式并不重要。我认为col-X-12您甚至可以跳过row和col-X-12课程。只需将所有内容放在常规div标记内，您就可以获得100％的宽度。

Answer 2

当然它是有效的，它只定义了两个100% width div元素，它们都在一行中。

它没有什么区别，如果你这样使用它或将它们分别放在两个row div中，当然这取决于你应用于行的css。

在您的示例中，col-xs-12和col-md-12将相互堆叠，两者都具有100％的宽度。您定义xs和md甚至没有真正的区别，因为它们在所有屏幕宽度上的宽度始终为100％。