Bootstrap 5如何实现图片居中、文本框叠加的响应式布局

核心优化逻辑为抛弃百分比margin的偏移方式，改用Bootstrap原生定位类+响应式断点控制偏移量，小屏设备下自动取消重叠效果，改为常规上下排列布局，避免适配问题。

实现代码（单文本块版本，适配全端） #

<div class="section bg-light py-5">
  <div class="container">
    <!-- 行容器加相对定位，作为内部元素偏移的参照 -->
    <div class="row position-relative">
      <!-- 右侧图片列 -->
      <div class="col-md-8 ms-auto z-1">
        <img src="http://placehold.it/769x600" class="img-fluid w-100" alt="内容图片">
      </div>
      <!-- 左侧文本卡片列 -->
      <div class="col-md-5 z-2 mt-md-5 me-n5 position-relative">
        <div class="p-5 bg-light-olive shadow">
          <h1>Content Heading</h1>
          <p>Content Description</p>
          <a href="#" class="btn btn-white">Action</a>
        </div>
      </div>
    </div>
  </div>
</div>

代码说明 #

• 桌面端（md断点及以上）：通过负边距类me-n5让文本卡片向右偏移，mt-md-5控制顶部间距，实现覆盖在图片左侧的效果，层级通过z-1、z-2控制，不需要额外写内联样式
• 移动端：自动取消偏移效果，文本块和图片变为上下常规排列，不会出现挤压、错位问题
• 所有样式尽量复用Bootstrap原生工具类，响应式适配逻辑和框架自带断点保持一致，兼容表现更稳定

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