卡片内图片横向排列应使用 .row + .col 栅格系统，而非 .card-img 类；需配合 .img-fluid、响应式断点（如 .col-12 .col-sm-6 .col-md-4）、.g-2 间距及避免嵌套 flex 干扰。
卡片内图片横向排列用 .row + .col 就够了，别套 .card-img
bootstrap 的 .card 默认是垂直流式布局，直接把多张图片塞进 .card-body 会堆成一列。想横排，核心不是改图片样式，而是用栅格系统控制容器——.row 提供水平 flex 容器，.col 控制每张图占几列。
常见错误是给 <img alt="Bootstrap怎么实现卡片内图片的横向布局" > 加 .card-img-top 或 .card-img，这些类专为单张封面图设计，自带块级、宽高约束，强行加多张会错位或溢出。
- 把图片统一放在
<div class="row"> 内，每个 <code><img alt="Bootstrap怎么实现卡片内图片的横向布局" >包在<div class="col"> 或指定列宽（如 <code>.col-4）里 - 图片建议加
.img-fluid，避免拉伸变形；不需要.rounded等修饰类，除非设计需要 - 如果图片高度不一致，加
.align-items-center到.row上可垂直居中对齐 - 常用组合：
.col-12 .col-sm-6 .col-md-4→ 手机 1 列、平板 2 列、桌面 3 列 - 如果图片内容重要（比如商品图），建议最小断点设为
md，避免小屏下图太小看不清 - 注意
.row默认有负 margin，必须包裹在.card-body或.p-0容器里，否则左右留白不一致 - 推荐用
.g-2（0.5rem）、.g-3（1rem），数值越大间隙越宽 -
.g-0可彻底取消间隙，适合拼接型图集 - 避免混用
.mx-2这类边距类，它们和.g-*冲突，导致实际间距翻倍 - 最简排查：临时删掉
.card-body上的所有.d-类，看.row对齐是否恢复 - 稳妥做法：把图片区域单独抽成一个
<div class="card-body p-0"><div class="row g-2 justify-content-center">...</div></div> - 不要在
.row上同时用.text-center和.justify-content-center，前者作用于行内元素，后者作用于 flex 子项，目标不同
响应式断点怎么设：用 .col-sm-6 而不是 .col-6
移动端窄屏下横排三张图会挤爆，必须按屏幕宽度分层控制列数。Bootstrap 的断点前缀（sm、md、lg）就是干这个的。
.col-6 是“所有尺寸下占一半”，而 .col-sm-6 表示“≥576px 才占一半，更小屏幕自动堆叠成一列”。实际项目中几乎不用纯 .col-* ，否则在手机上图片会过窄或文字换行异常。
图片间距靠 .g-2 不要手写 margin
很多人习惯给每个 .col 加 margin-right，结果在最后一列或多列换行时出现多余空隙。Bootstrap 5+ 的 .g-* （gap）类才是正确解法——它作用于 .row，均匀分配子项间距，且自动处理换行间隙。
Flex 对齐失效？检查 .row 是否被 .d-flex 干扰
如果加了 .justify-content-center 没反应，大概率是父容器（比如 .card-body）本身用了 .d-flex，导致 .row 的 flex 属性被覆盖。Bootstrap 的 .row 本质是 display: flex，但嵌套 flex 容器时，子项的对齐行为受上级影响极大。
横向布局的关键不在图片本身，而在容器层级和栅格语义是否干净——只要 .row 是直接子容器、没被其他 flex 层级干扰、断点设置合理，就基本不会出问题。真正容易被忽略的是 .g-* 的存在感太低，很多人根本没想到 gap 还能这么用。
