如何在 Bootstrap 4 中创建偏移量答案

【问题标题】：How to create a offset in Bootstrap 4如何在 Bootstrap 4 中创建偏移量
【发布时间】：2018-03-16 03:33:39
【问题描述】：

首先对我的英语不好表示歉意。

我正在使用 bootstrap 版本 4 测试版（最新不是 alpha）。这很好。但我想知道在新版本的引导程序中他们删除了偏移类。如果有人给我解决方案，我将不胜感激如何使用 flexbox 进行任何数量的偏移。我的意思是在我使用 .col-offset-2 之前，这意味着偏移 2 列，我想要这个与 flexbox。谢谢

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

偏移量被替换为 ml-**-auto。

下面的代码将是 12 的尺寸小于 md，但 9 的偏移量为 3 的尺寸 md 或更高。因为我已将 md 放在 ml-**-auto 中

    <div class="col-12 col-md-9 ml-md-auto">
        test
    </div>

在此处查看官方文档https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

此外，这里也有一个很好的答案，关于偏移在 bootstrap 4 中的工作原理 Offsetting columns is not working (Bootstrap v4.0.0-beta)

编辑：2018/10/25

在 Bootstrap 4 Beta 2 中恢复了偏移量。这是一个示例：

<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- 用于margin-right，ml- 用于margin-left。

documentation 演示了ml-*-auto 的使用（其中 * 是目标分辨率——例如 lg 或 md。）这相当于在 CSS 中设置 margin-left: auto，这实际上是在说“将其作为尽你所能。”通过同时使用ml-*-auto 和mr-*-auto，您可以有效地居中列。

这是auto 属性的完整前缀列表：

ml- 剩余边距
mr- 右边距
mb-边距底部
mt-边距顶部
mx-水平边距（左边距+右边距）
my- 垂直边距（上边距 + 下边距）
m- 所有边距

除了auto，还可以指定列宽——ml-lg-2等

所以col-offset-2，（我认为）会将内容留出两个空格，相当于ml-2 或ml-lg-2。

【讨论】：

【解决方案3】：

您可以使用 .offset- .offset-sm- .offset-md- .offset-lg- .offset-xl-

<div class="offset-2 col-8">
    test 
</div>

这里有一些例子 - http://formoid.com/articles/bootstrap-offset-example-961.html

【讨论】：