Bootstrap 4.5.0响应式宽度问题：中小断点卡片右侧留白

作为前端新手遇到这种响应式问题很常见，我帮你梳理几个最可能的原因和排查步骤，应该能快速解决：

一、先检查栅格的核心结构是否正确 #

Bootstrap 4的栅格是严格层级依赖的：必须是 container/container-fluid → row → col-* 的嵌套关系，缺了任何一层都会导致响应式失效。很多新手容易直接把 col-* 放在 container 里，漏掉 row，这会让列的间距、宽度计算完全混乱。

正确的基础结构应该是这样：

<!-- 用container-fluid可以占满整个视口宽度，container是固定宽度 -->
<div class="container-fluid">
  <!-- 必须加row，它负责处理列的间距和对齐 -->
  <div class="row">
    <!-- 移动优先写法：小屏/中屏占满12列，大屏占6列 -->
    <div class="col-12 col-lg-6">
      <div class="card">
        <div class="card-body">
          <!-- 卡片内容 -->
        </div>
      </div>
    </div>
  </div>
</div>

二、排查是否有自定义样式覆盖了Bootstrap规则 #

如果你给 .col-* 或者 .card 加了自定义样式，很可能破坏了Bootstrap的响应式逻辑：

• 比如给 .col-sm-6 硬写了 width: 400px，那中小屏就不会自动适应宽度了
• 给 .card 设置了固定宽度 width: 500px，哪怕栅格是12列，卡片也只会显示固定宽度，留下空白

解决方法：打开浏览器开发者工具（按F12），切换到中小屏模式，选中你的卡片/列元素，查看Computed样式里的width值，看是不是被其他自定义样式覆盖了。找到冲突的样式，要么删除，要么用 !important 临时测试（不推荐长期用，最好调整样式优先级）。

三、尝试用「移动优先」的栅格写法 #

Bootstrap 4是移动优先的框架，最好先写小屏的样式，再写大屏的覆盖样式，比反过来写更稳妥：

• col-12：默认（小屏）占满整个宽度
• col-lg-6：大屏（≥992px）时改为占一半宽度

这种写法比单独写 col-sm-12/col-md-12 更简洁，也不容易出错。

四、确认Bootstrap CSS是否正确引入 #

虽然你说大屏正常，但还是可以检查一下：确保页面头部的Bootstrap 4.5.0 CSS链接是有效的，没有拼写错误或者路径问题。比如正确的CDN链接是：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

快速测试方法 #

先把你的页面简化成最基础的结构（只保留Bootstrap引入、栅格和卡片），看看中小屏是否正常。如果正常，再一点点加回你的其他内容和样式，就能找到导致问题的那部分代码了。

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