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

Question

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

<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" class。但是，这与推和拉的行为方式不同。因此，使用 "order" class.

无法使元素重叠

在示例代码中，您可以找到 class pull-md-3。这将导致 "column 2" 向左拉三步（在网格系统中），从而导致它与 "column 1".

重叠

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

来做到这一点

Answer 1

您可以通过使用 SASS 或 LESS 重新编译 CSS 来像 "pull-md-" 一样编译 classes。一个一个去安排会很麻烦。

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

最佳解决方案是将 margin-left 值更改为负百分比。

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

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

how can i overlap two elements using twitter-bootstrap (v4.4.0 or higher)?

html

css

overlap

twitter-bootstrap