Bootstrap 5.1缩屏时文本重叠图片及img-fluid失效问题

云原生阿岚

2026-8-28

问题根因

出现文本覆盖图片、右侧异常留白的核心原因是Bootstrap栅格系统使用不符合规范，具体有3个错误：

给.col-*栅格列添加了m-2外边距：Bootstrap栅格列的宽度是按父容器百分比计算的，额外添加margin会打破flex布局的宽度计算规则，导致列总宽度溢出容器，出现内容重叠、布局错位。栅格的列间隙应该通过行元素上的g-*类控制，禁止直接给列加外边距。
列宽设置不符合12栏规则：原本规划3栏+9栏的满宽布局，实际代码写的是col-3+col-8，总宽度仅占11栏，本身就会预留空白，叠加margin问题直接加剧布局错乱。
缺少响应式断点配置和图片响应式设置：所有屏幕尺寸下都强制列按固定比例排列，小屏幕下空间不足也不会自动堆叠；图片写死400px固定宽高，没有自适应父容器的规则，小屏幕下会溢出列范围。之前加img-fluid后图片消失，是因为列宽度被错误的margin挤压至极小值，图片100%匹配父容器宽度自然无法显示，不是img-fluid本身的问题。

修复方案

移除所有列上的m-2类，通过行元素的g-*类控制列间隙
使用响应式列类，仅在中等及以上屏幕保持左右分栏，小屏幕下自动堆叠为整行宽度
列宽调整为col-md-3+col-md-9，凑满12栏满宽布局
修复列布局后给图片添加img-fluid类，实现图片宽度自适应父容器

修复后的完整可运行代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row g-3">
    <div class="col-md-3">
      <img src="https://via.placeholder.com/400" class="figure-img img-fluid border border-dark" alt="专辑封面">
    </div>
    <div class="col-md-9">
      <div>
        <div class="mb-2">
          <label class="d-block">Album Artists</label>
          <a href="/artist.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Album Artists / Sting&cid=0$=Album_Artists$18649" class="h4">
            Sting
          </a>
        </div>
        <div class="mb-2">
          <label class="d-block">Genre</label>
          <a href="/genre.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Genres / Pop rock&cid=0$=Genre$17160" class="h4">
            Pop rock
          </a>
        </div>
        <div class="mb-2">
          <label class="d-block">Album Type</label>
          <a href="/albumtype.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Album Types / EP&cid=0$=MusicBrainz Album Type$14830" class="h4">
            EP
          </a>
        </div>
        <div class="mb-2">
          <label class="d-block">Label</label>
          <a href="/container.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Labels / A&M Records&cid=0$=Label$18525" class="h4">
            A&M Records
          </a>
        </div>
        <div class="mb-2">
          <label class="d-block">Year</label>
          <a href="/container.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Years / 1988&cid=0$=Date$789" class="h4">
            1988
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

修复后效果：

大屏幕下保持3:9的左右分栏布局，间隙均匀无多余空白
屏幕缩小到中等尺寸以下时，两列自动堆叠为上下布局，图片自动适配屏幕宽度，不会出现溢出、重叠问题

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