Question

首先为我糟糕的英语道歉。

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

Answer 1

偏移类已被边距类替换。对于 margin-right ，这些为mr-加上 margin-left 的ml-。

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

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

ml-保证金
mr-保证金权利
mb-保证金底部
mt- margin top
mx-水平边距（左边距+右边距）
my-垂直保证金（保证金顶部+保证金底部）
m-所有页边距

除了auto之外，您还可以指定列宽 - ml-lg-2等。

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

Answer 2

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

下面的代码将是12个大小小于md，但是9个大小为md和更高的偏移量为3.因为我已将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>

Answer 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

如何在Bootstrap 4中创建偏移量

3 个答案: