Question

我正在关注网页创建教程，并且教师使用类＆＃34; col-sm-offset-1＆＃34;创建了一个部门。这对于该类中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

注意： Bootstrap Alpha v4没有.offset类，确保使用Bootstrap 4.0 。

Answer 2

在Botstratp v4中使用offset-sm-1之类的：

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

Answer 3

在Bootstrap 3 col-*-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来做到这一点......

Answer 5

您还必须记住使用偏移offset-*函数和您使用的相同网格。例如 <div class="col-lg-2 col-md-6 text-center offset-lg-1"> some text here</div> 要么 <div class="col-sm-2 col-md-6 text-center offset-sm-1"> some text here</div> 以保持代码清洁

Answer 6

除了@ Morris，您还可以使用.mx-auto将主列居中，这样您就不需要同时使用mr-auto和ml-auto。

如上所述，在bootstrap 3中，col col offset用于模拟列，因此您无需创建空col。

offset在Bootstrap 4中有什么作用？

6 个答案: