Bootstrap 4 Flexbox横向滚动卡片布局问题求助及解决记录

问题现象 #

问题1：卡片数量不足8张时Flexbox可视区域填充异常 #

• 案例A：仅3张卡片时，Flexbox布局完全错位，下方的badge元素直接侵入卡片显示区域
• 案例B：7张卡片时，Flexbox容器几乎填满，但左侧存在明显的空白间隙
• 案例C：8张卡片时，布局显示及横向滚动功能均正常

问题2：卡片内容差异导致按钮位置偏移 #

不同卡片内的内容高度不一致，使得卡片底部的按钮无法对齐，需要通过填充空白的方式让所有按钮保持同一水平位置

解决方案 #

经@CBroe提示，添加以下CSS样式后，上述两个问题均已解决：

.row {
  width: 100%;
  max-width: 100vw;
}

（附问题示意图及完整代码示例）

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