不使用媒体查询，如何填充Bootstrap卡片布局中的Div空白？

我来帮你搞定这个卡片布局填不满的问题！从你给出的代码片段来看，核心问题大概率是栅格结构不规范或者自定义类干扰了宽度布局导致的，咱们一步步来修正：

第一步：规范Bootstrap布局层级 #

Bootstrap的栅格遵循「容器 → 行 → 列」的严格层级，你的代码里把自定义box类和row混在一起，破坏了布局逻辑，这是填不满的主要原因。以下是修正后的完整代码：

<!-- 用container-fluid实现全屏宽度，若需要固定居中宽度则换成container -->
<div class="container-fluid py-4">
  <div class="row g-3"> <!-- g-3控制列之间的间距，可按需调整 -->
    <!-- 覆盖全断点的列类，确保从移动端到桌面端都占满整行 -->
    <div class="col-12 col-md-12 col-lg-12">
      <!-- h-100让卡片高度一致，不需要的话可以去掉 -->
      <div class="card h-100">
        <!-- 卡片图片用card-img-top规范Bootstrap卡片结构 -->
        <img src="img/crm.png" class="card-img-top imageban" alt="CRM系统">
        <!-- 卡片内容区域 -->
        <div class="card-body">
          <h5 class="card-title"><b>CRM</b></h5>
          <!-- 这里可以添加更多卡片内容，比如描述文字、按钮等 -->
        </div>
      </div>
    </div>
  </div>
</div>

第二步：排查潜在干扰因素 #

1. 自定义类检查：你的代码里有box、box-content、h-60这些自定义类，一定要确认它们的CSS没有设置max-width、width: xx%或者float属性——这些都会限制卡片的宽度，导致无法撑满容器。
2. 响应式列类覆盖：如果需要在不同宽度下都保持满宽，确保列类覆盖了所有断点：col-12（移动端）、col-md-12（平板）、col-lg-12（桌面），避免出现某个宽度区间列的宽度未被定义的情况。
3. 容器选型：如果要全屏填满，用container-fluid；如果要固定宽度居中，用container，别搞混两者的作用。

第三步：测试验证 #

替换代码后拖动浏览器窗口从窄到宽测试：

• 移动端：卡片占满全屏
• 平板到桌面宽度区间：卡片自动撑满容器
• 桌面宽度：保持满宽状态

如果还是有问题，那大概率是你的全局自定义CSS里给.card或父元素设置了宽度限制，比如max-width: 800px，针对性排查调整即可。

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