如何使用 twitter-bootstrap（v4.4.0 或更高版本）重叠两个元素？

Question

在引导程序中曾经有两个类允许一个推和拉元素。 如果使用得当，可以重叠两个元素。 示例：

<div class="container">
    <div class="row">
        <div class="col-md-9" style="background-color:green">column 1</div>
        <div class="col-md-3 pull-md-3" style="background-color:blue">column 2</div>
    </div>
</div>

Bootstrap 已将这些功能替换为“订单”类。 但是，这与 push 和 pull 的行为方式不同。 因此，无法使用“order”类使元素重叠。

在示例代码中，您可以找到类 pull-md-3。这将导致“列 2”向左拉三步（在网格系统中），从而使其与“列 1”重叠。

当然，这仍然可以使用普通的旧 css 来完成。 我只是希望仍有办法使用引导程序来做到这一点。

Answer 1

您可以通过使用 SASS 或 LESS 重新编译 CSS 来编译类似“pull-md-”的类。一个一个地安排起来会很麻烦。

Bootstrap 4 使用 flex。与旧版本相比，现在只有偏移类。 Offset辅助类；使用采用百分比值的 ma​​rgin-left 属性。

最好的解决方案是将 ma​​rgin-left 值更改为负百分比。

根据 Bootstrap 4，您需要将 offset-md-3 类更改为 margin-left: -25%; pull 以生成 margin-left: 25%; pull-md-3。