Bootstrap 4 card-deck无法填满主面板剩余宽度、靠左排布问题

• 你当前的写法属于Bootstrap 4.6中card-deck组件的典型误用：card-deck的设计逻辑是直接包裹.card元素，依靠自身内置的flex布局自动为卡片分配等宽尺寸、撑满父容器全部可用宽度，本身不需要给卡片手动添加col-md-4这类栅格类。
• 当你用带col-md-4的包裹层作为card-deck的直接子元素时，card-deck内置的自动伸缩规则（仅对直接子元素.card生效的flex: 1 0 0%属性）完全不会作用到你的col包裹层上，导致整体宽度计算错乱、卡片组无法撑满容器，最终出现卡片组靠左对齐、右侧黑色背景外露的问题。
• 多层嵌套row结构下，如果存在父容器宽度限制、不符合规范的负边距/内边距设置，会进一步放大宽度计算偏差，加剧布局错位。

1. 修正错误的结构层级 #

移除原本套在每张卡片外层的col-md-4包裹层，按照card-deck的设计逻辑重写结构，参考标准实现：

<!-- 设置了黑色背景的最内层嵌套row -->
<div class="row bg-black p-3">
  <!-- card-deck作为row的直接子元素，手动加w-100强制占满可用宽度 -->
  <div class="card-deck w-100">
    <!-- 内部直接放置.card，不再嵌套任何col类 -->
    <div class="card">
      <div class="card-body">卡片1内容</div>
    </div>
    <div class="card">
      <div class="card-body">卡片2内容</div>
    </div>
    <div class="card">
      <div class="card-body">卡片3内容</div>
    </div>
  </div>
</div>

2. 校验栅格宽度分配 #

• 上述结构调整完成后，card-deck的flex行会自动将三张卡片等分为容器宽度，卡片之间的15px间距由card-deck内置的外边距规则自动处理，不需要手动计算宽度。
• 若仍存在局部背景外露，逐行检查嵌套row的栅格占位：
  • 确保侧边功能面板和主面板的栅格占比合计为12列（比如侧边栏占col-md-3、主面板占col-md-9），没有残留未删除的空col元素挤压主面板可用宽度。
  • 检查row的父容器是否带有Bootstrap默认的15px左右内边距，抵消row本身自带的左右-15px负边距，保证row的实际宽度和父容器完全对齐，不会出现宽度溢出或不足。

3. 固定桌面端的兜底设置 #

因为你不需要做响应式适配，可补充少量自定义样式，强制card-deck始终保持横向排列、完全撑满宽度：

.card-deck {
  flex-direction: row !important; /* 跳过移动端自动纵向堆叠的逻辑，适配固定桌面场景 */
}
.card-deck > .card {
  flex: 1 1 0%; /* 强制三张卡片均分全部容器宽度，无留白 */
}

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