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

Question

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

Answer 1

但目的是offset-0什么？

一句话:压倒一切.

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

margin-left: 0;

如果您查看官方的Bootstrap文档,它会说:

您还可以使用.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的偏移量margin-left: 0.在css中这意味着.

因此,如果您只需要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>

_{最好在"整页"模式下查看代码段,然后调整视口大小以查看更改.}