bootstrap-4 - 偏移量在 Bootstrap 4 中有什么作用？

Question

我正在学习网页创建教程，讲师创建了一个带有类 .col-sm-offset-1 的部门。 .
这对具有该类的 div 中的内容有何作用？
这是完整的代码:

<div class = "col-sm-10 col-sm-offset-1">

https://jsfiddle.net/zmtmphtq/

Answer 1

根据 bootstrap 4.0 .offset类可用。

1. 使用类 .offset See bootstrap offset documentaion

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

2. 或使用类 .mr (右边缘) .ml (mrgin-left), See bootstrap spacing documentaion

`<div class="row">
   <div class="col-4 mr-5">col-4</div>
   <div class="col-4 ml-5">col-4</div>
</div>`

3. 或者创建一个与您希望偏移量一样大的空列

`<div class="row">
  <div class="col-4"></div>
  <div class="col">col-4</div>
 </div>`

4. 或使用 . mr-auto抵消下一列

`<div class="row">
    <div class="col-4 mr-auto">col-4</div>
    <div class="col-4">col-4</div>
 </div>`

See the code in this codepen

Note: Bootstrap Alpha v4 does not have the .offset class, Make sure to use Bootstrap 4.0.