Bootstrap v4.0 偏移列的新方法

Question

我只是无法理解 Bootstrap v4.0 偏移列的新方法。该文档对此解释甚少。我仍然习惯于能够通过定义的列值（例如 ）来偏移列col-md-offset-2。现在我将如何在新的网格框架中做到这一点？

我已经尝试了ml-auto、mr-auto等的几种变体，但似乎没有什么能做我想要它做的事情col-md-offset-<n>。

Answer 1

我正在尝试得到这个：<div class="col-md-10 col-md-offset-2"></div>

col-md-10在 Bootstrap v4 中，您可以通过申请10 列的宽度并ml-md-auto“跳过”左侧的空间（这正是 2 列的宽度，因为一行有 12 列）来实现：

.row {
    background: red;
}

.row > div {
    background: yellow;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-10 ml-md-auto">md-10 offset-2</div>
    </div>
</div>

除了提到的有关 offsetting 的文档部分之外，也许flexbox 实用程序在某些情况下也很有帮助。

更新： Bootstrap 4 beta 2恢复了偏移类，您可以像这样使用它们：

<div class="col-md-10 offset-md-2"></div>