html - Bootstrap - 列默认值

Question

关于 bootstrap grid system文档说:

Content should be placed within columns, and only columns may be immediate children of rows.

以智能手机和平板电脑为例:

<div class="row">
  <div class="col-xs-12 col-sm-12">Column One</div>
  <div class="col-xs-12 col-sm-12">Column Two</div>
</div>

当列应填充行宽时，我们是否必须设置类 col-xs-12 col-sm-12，或者是否有一个我们可以为两种设备设置的默认类？如果我们不设置 col 类，由于 .row 类的负边距，内容会向左和向右推送。

Answer 1

由于 Bootstrap 是移动优先的，如果您设置 .col-xs-12，您的 div 将在所有设备上都有一个完整的。这意味着您不必设置 .col-sm-12。

<div class="row">
  <div class="col-xs-12">
    <!--
      12-col on xs/sm/md/lg 
    -->
  </div>
  <div class="col-xs-12 col-6-md">
    <!--
      12-col on xs/sm
      6-col on ms/lg
    -->
  </div>
  <div class="col-xs-12 col-6-md col-12-lg">
    <!--
      12-col on xs/sm
      6-col on md
      12-col on lg
    -->
  </div>
</div>

此外，默认值恰好是 .col-xs-12。这意味着您甚至不必指定它:

<div class="row">
  <div class="col-md-6">
    <!--
      12-col on xs/sm
      6-col on md
    -->
  </div>
</div>