Bootstrap v4中的偏移列[重复]答案

【问题标题】：Offsetting columns in Bootstrap v4 [duplicate]Bootstrap v4中的偏移列[重复]
【发布时间】：2017-08-22 19:41:23
【问题描述】：

过去是什么：

<div class="row">
  <div class="col-sm-2 col-sm-offset-3"> ... </div>
</div>

成为：

<div class="row">
  <div class="col-xs-2 offset-xs-3"> ... </div>
</div>

在 Bootstrap v4 Alpha 中。现在，我已将网站更新为 v4 Beta offset-xs-3 似乎不再工作：https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns。

如何在 v4 Beta 中偏移指定数量的列？

https://codepen.io/Deka87/pen/prVLyE

【问题讨论】：

查看您链接到的文档。 “我们不再有 v3 风格的偏移类。相反，使用像 .mr-auto 之类的边距实用程序”
你想要的输出是什么？
“指定数量”是什么意思？如果可以的话，设置一个 jsFiddle，举个例子。我相信您链接的文档非常清楚。
@DimitrisDamilos，在问题中包含了示例代码。这正是 offset-sm-x 和 col-sm-offset-x 在以前的版本中所做的。
@RBCunhaDesign，数以百万计的用例。事物并不总是在中心，或在右侧或左侧。这正是他们拥有col-sm-offset-X 或offset-sm-X 的原因。

标签： html css twitter-bootstrap-4

【解决方案1】：

这是你需要的吗，https://jsfiddle.net/5L49z51y/1/？

<div class="row">
  <div class="col-sm-2 ml-sm-auto mr-sm-auto"> Here </div>
</div>

【讨论】：

不，这会使其居中对齐。我希望它根据情况向右移动两三四列。如果您曾经使用过.col-sm-offset-X 或offset-sm-X，您应该知道我想要什么。

【解决方案2】：

我知道这并不漂亮，但由于 Bootstrap v4-beta 将数字偏移从游戏中移除，您可以在之前添加一个空列，并使其成为您想要偏移下一个列的任意多列。

[class*="col-"] {
  background-color: #eee;
}
.row {
  background-color: #f9f9f9;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-2">
      .col-sm-2 offseted by 3 columns
    </div>
  </div>
</div>

【讨论】：

对，希望能避免这种情况，尽管我错过了一些东西。这救了我很多次。
@sdvnksv 我还没有将任何东西转换为 BS v4-beta，但我确实有项目在 v4-alpha 上并且也使用偏移方法。如果我确实找到了另一种方式，我会回到这里分享。我猜他们之所以把它拿出来是因为很多人只使用偏移类来使屏幕居中。
谢谢！我也通过 Github 提交了一个问题。
刚收到回复，Beta 2中会恢复偏移列。
@sdvnksv，这是个好消息！