Bootstrap - 列默认值

Question

在bootstrap网格系统文档中说:

内容应放在列中,只有列可以是行的直接子项.

以下是智能手机和平板电脑的示例:

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