在bootstrap中使用col - * - offset-0有什么用？

Question

我知道在div标签上使用时，可以看到添加大于0的偏移量。但offset-0的目的是什么呢？如果它没有添加任何有形的东西？

Answer 1

  

但是offset-0的目的是什么？

一个字：覆盖。

您可以使用该类覆盖以前的偏移量。这个类的实际规则很简单：

margin-left: 0;

如果您查看官方Bootstrap documentation，请说：

  

您也可以使用以下方式覆盖较低网格层的偏移量   .col-*-offset-0课程。

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

演示

在此演示中，蓝色<div>具有以下额外类别：

• col-xs-offset-3这意味着尺寸为xs 及以上的设备的偏移量将等于3.在css中，这意味着margin-left: 25%。
• col-xs-offset-0这意味着尺寸为sm 及以上的设备的偏移量将等于0.在css中，这意味着margin-left: 0。

因此，如果您只想为xs设备设置偏移量，则需要使用偏移量0覆盖此值sm及更高版本。

.row div div {
  background: red;
  height: 50px;
}
.row div:last-of-type div {
  background: blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-6 col-sm-4">
    <div></div>
  </div>
  <div class="col-xs-6 col-sm-4">
    <div></div>
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
    <div></div>
  </div>
</div>

_{在“整页”模式下最佳浏览的代码段，然后调整视口大小以查看更改。}