css - bootstrap 中col-*-offset-0的用途是什么？

我知道在div标签上使用大于0的偏移量是可见的。但是offset-0的目的是什么呢？

最佳答案

但是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设备的偏移量，则对于任何sm及更高版本，都需要使用偏移量0覆盖它。

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

最好在“整页”模式下查看代码段，然后调整视口大小以查看更改。

关于css - bootstrap 中col-*-offset-0的用途是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42838439/