html - bootstrap 中 "row"类的技术混淆

Question

需要知道在 BOOTSTRAP 中是否强制使用 <div class="row">在 <div class="col-md-6"> 之前或任何。

最近我看到一段代码有如下标记

<div class="col-md-12">
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>
</div>

以上内容似乎在所有设备上都能完美运行。现在它应该是按照 Bootstrap 包含列的“行”..

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

我也检查了 Bootstrap CSS。一个“.row”只有 -15px 的左右边距，默认情况下它会清除 float 。

用列替换行是否会产生任何其他技术问题或差异

谢谢

Answer 1

您的第一个代码示例无效:

Columns (.col-*-*) can only be children of .rows or .form-groups

Bootstrap's grid system requires that grid columns must be children of grid rows (or .form-groups, because they extend .row in the Less source).

Wrong:

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-12">...</div>
    <!-- You can't nest columns directly like this. This is missing a level of .row -->
  </div>
</div>

缺少 row 会弄乱列的填充。