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

Question

bootstrap 中曾经有两个类允许一个推和拉元素。如果使用得当，可以重叠两个元素。示例:

<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 已将这些功能替换为“order”类。但是，这与推和拉的行为方式不同。因此，使用“order”类不可能使元素重叠。

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

当然这仍然可以使用普通的旧 css 来完成。我只是希望仍然有一种方法可以使用 bootstrap 来做到这一点。

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 to make margin-left: 25%; pull-md-3.