如何使用Twitter Bootstrap（v4.4.0及以上）实现两个元素重叠？

嘿，我完全懂你的痛点！以前用Bootstrap的pull-*和push-*类时，靠调整列的位置很容易实现元素重叠，但换成新的order-*类后就懵了——毕竟order-*只是改变元素的渲染顺序，压根不会调整它们在网格布局里的物理位置，自然没法重叠。

那怎么用Bootstrap原生方法实现类似之前pull-md-3的重叠效果呢？其实可以用负边距工具类来替代，Bootstrap从v4开始就提供了这类工具，完美适配网格系统的单位：

示例代码 #

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

这里的ms-md-n3就是关键：

• ms是margin-start的缩写（对应左方向，RTL布局下是右）
• n3代表负的3个网格单位，刚好对应你之前用的pull-md-3的偏移量

这样设置后，第二列就会向左偏移3个网格单位，和第一列产生重叠，效果和之前的pull-md-3完全一致。

另外如果你需要更灵活的定位，也可以结合Bootstrap的position-relative类，再搭配left-*或者right-*的工具类，但负边距的方式更贴合网格系统的设计，用起来更顺手。

内容的提问来源于stack exchange，提问作者jownzz