offset在Bootstrap 4中有什么作用？

Question

我正在关注网页创建教程,教师用"col-sm-offset-1"类创建了一个部门.这对于该类中div的内容有什么作用？这是完整的代码:

.col-sm-offset-1https://jsfiddle.net/zmtmphtq/

Answer 1

根据bootstrap 4.0 .offset类可用.

1.使用类.offset 参见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.或者使用class .mr(margin-right).ml(mrgin-left),参见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>`

请参阅此codepen中的代码

注意: Bootstrap Alpha v4没有.offset类,请确保使用Bootstrap 4.0.

Answer 2

在 Bootstrap v4 中，您可以offset-sm-1像这样使用：

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

Answer 3

在 Bootstrap 3col-*-offset-*中将用于偏移（向右移动）列，但在 Bootstrap 4 中这已更改为offset-*-1，因此标记将是：

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

http://www.codeply.com/go/sbruTFHL6q

Answer 4

基本上 col-sm-offset-1 会在左侧留下一定的空间，而主要内容则放在右侧

你也可以通过给予 margin-left 来做到这一点......