基于Bootstrap 5.3.3实现三列偏移布局响应式转为两列

你的问题核心在于响应式断点处的布局控制逻辑混乱，以及自定义偏移规则与Bootstrap网格系统的冲突。以下是具体修复方案：

1. 用Bootstrap内置类控制第三列的显隐 #

直接使用Bootstrap响应式显示类替代自定义逻辑，给第三列添加d-none d-lg-block，这样在小于lg的屏幕下会自动隐藏第三列，无需额外JS操作。

2. 保证中间列偏移的响应式兼容性 #

不要用自定义的margin-top: -50%这类规则，改用Bootstrap的负margin类（如mt-lg-n5）结合响应式前缀，同时给父级.row添加position-relative，确保偏移不会脱离文档流引发重叠。

3. 图片合并到前两列的正确方式 #

在小屏幕下，把第三列的图片复制一份（或用响应式类控制显示）放在前两列的合适位置，比如第一列底部，用d-block d-lg-none控制仅在小屏幕显示；原第三列的图片则用d-none d-lg-block控制仅在大屏幕显示，避免DOM操作导致的布局错乱。

修正后的代码示例 #

<div class="container py-5">
  <div class="row position-relative">
    <!-- 第一列 -->
    <div class="col-lg-4">
      <div class="bg-light p-4">
        <h3>第一列内容</h3>
        <p>这里是第一列的文本内容...</p>
        <!-- 小屏幕专属图片 -->
        <img src="your-image.jpg" class="img-fluid d-block d-lg-none mt-3" alt="图片描述">
      </div>
    </div>

    <!-- 中间列 - 仅大屏幕生效的偏移 -->
    <div class="col-lg-4 mt-lg-n5">
      <div class="bg-light p-4">
        <h3>第二列内容</h3>
        <p>这里是第二列的文本内容...</p>
      </div>
    </div>

    <!-- 第三列 - 仅大屏幕显示 -->
    <div class="col-lg-4 d-none d-lg-block">
      <div class="bg-light p-4">
        <img src="your-image.jpg" class="img-fluid" alt="图片描述">
      </div>
    </div>
  </div>
</div>

关键注意点 #

• position-relative给父级.row添加，确保负margin偏移不会破坏网格流。
• mt-lg-n5是Bootstrap内置负margin类，n5对应margin-top: -3rem，可根据实际需求调整n1到n5的数值。
• 避免使用position: absolute或固定高度的自定义CSS，这类规则会干扰Bootstrap的响应式网格特性。

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