Bootstrap 4如何向上移动行？解决行被列挤压下移问题

你提到的这个布局需求，Bootstrap本身没有直接对应的现成类，但我们可以通过两种实用方法来实现：

方法1：利用Bootstrap网格嵌套（推荐） #

更符合Bootstrap网格设计逻辑的做法，是把左侧的黑色块和蓝色块放在同一个列容器里，让它们自然上下排列，右侧红色块单独占一列。这样既不需要额外偏移，也能完美适配响应式场景：

<div class="container">
  <div class="row">
    <!-- 左侧列：包含上下两个色块 -->
    <div class="col-sm-5">
      <div style="color: white; background:black; height: 100px">Something</div>
      <div style="color: white; background:blue; height: 300px">something</div>
    </div>
    <!-- 右侧红色块列 -->
    <div class="col-sm-7" style="color: white; background:red; height: 400px">something</div>
  </div>
</div>

方法2：负margin手动偏移（适合保留独立row结构的场景） #

如果你一定要保留分开的row结构，可以通过给下方蓝色块添加负margin-top来实现偏移——计算好上方短列与长列的高度差（300px-100px=200px），直接设置偏移值即可：

<div class="container">
  <div class="row">
    <div class="col-sm-5" style="color: white; background:black; height: 100px">Something</div>
    <div class="col-sm-7" style="color: white; background:red; height: 300px">something</div>
  </div>
  <div class="row">
    <div class="col-sm-5" style="color: white; background:blue; height: 300px; margin-top: -200px;">something</div>
  </div>
</div>

⚠️ 注意：这种方法需要手动计算高度差，在小屏幕（列自动堆叠）时可能出现布局错乱，建议配合媒体查询适配不同屏幕：

@media (min-width: 576px) {
  .offset-col {
    margin-top: -200px;
  }
}

然后把类加到蓝色块上：<div class="col-sm-5 offset-col ...">

另外提一句，你代码里写的position: top是无效的，position属性的合法取值是static、relative、absolute、fixed、sticky哦。

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