我如何使用 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 來完成。 我只是希望仍然有辦法使用引導程序來做到這一點。

Answer 1

您可以通過使用 SASS 或 LESS 重新編譯 CSS 來編譯類似“pull-md-”的類。 一一安排會相當麻煩。

Bootstrap 4 使用 flex。 與舊版本相比，現在只有偏移類。 Offset輔助類； 使用帶有百分比值的margin-left屬性。

最好的解決方案是將margin-left值更改為負百分比。

根據 Bootstrap 4，您需要將 offset-md-3 類更改為margin-left: -25%; 拉動使margin-left: 25%; 拉-md-3。