Bootstrap 5 卡片横向排列应使用 row+col 栅格系统，禁用 float 或 inline-block；正确结构为 row 容器内嵌 col 类卡片（如 col-md-4），配合 card-body 确保对齐，并依断点选择 col-xl-3（≥1200px 四列）、col-lg-4（≥992px 三列）、col-md-6（≥768px 两列）、col-12（手机单列）。
Bootstrap 5 卡片横向排列用 row + col 最稳
直接上结论：别用 float 或 display: inline-block，Bootstrap 5 默认弃用这些老方案。正确姿势是把 card 放进 row 容器，再用 col-* 类控制单张卡片宽度和换行行为。
常见错误是只写 <div class="card"> 然后并排堆——没网格系统约束，卡片会塌陷、错位或在小屏下不换行。<ul>
<li>
<code>row 必须存在，它提供负外边距抵消 col 的 padding，否则左右留白不对称
col，例如 col-md-4 表示中等屏及以上每行 3 张，小屏自动堆叠card-body，否则 h1/p 等元素的默认 margin 会破坏垂直对齐响应式断点选哪个？看真实设备宽度而非“几列”
很多人卡在“我要 4 张横排”，就盲目写 col-3，结果手机上看挤成一条缝。Bootstrap 的 col-*-* 是按视口宽度生效，不是固定列数。
推荐组合（基于 Bootstrap 5.3 默认断点）：
- 桌面大屏（≥1200px）：用
col-xl-3→ 每行 4 张 - 桌面常规（≥992px）：用
col-lg-4→ 每行 3 张 - 平板（≥768px）：用
col-md-6→ 每行 2 张 - 手机（col-12 → 每行 1 张（无需显式写）
实际写法：<div class="col-md-6 col-lg-4 col-xl-3"><div class="card">...</div></div>，类名顺序不影响，但建议从小到大写，可读性高。
卡片高度不一致导致布局错乱？加 h-100 和 d-flex flex-column
文字长度不同、图片有无、按钮有无，都会让卡片高度参差。这时 row 里的 col 会按内容撑开，上下不对齐。
两个关键补丁必须一起用：
- 给最外层
col加h-100：确保它占满父容器高度 - 给
card加h-100 d-flex flex-column：让卡片自身拉满，并用 flex 布局约束子元素 -
card-body里文字多时，加flex-grow-1让它撑开剩余空间，按钮就能稳定贴底
示例结构：<div class="col h-100"><div class="card h-100 d-flex flex-column"><div class="card-body d-flex flex-column">
<p class="flex-grow-1">内容</p>
<button class="mt-auto">操作</button>
</div></div></div>
用 card-group？别，它已废弃且不响应式
Bootstrap 4 有 card-group，但 5.x 文档明确标记为 Deprecated。它强制卡片等高、无间距、无法响应式断行，连官方都不维护了。
现在硬套只会遇到这些问题：
- 加
col类无效，card-group内部用 flex，会覆盖网格行为 - 小屏下仍强行横排，溢出容器
- 自定义圆角、阴影、边框时样式冲突严重
真要等宽等高，就老实用 row + col + h-100 组合；要卡片紧挨着不留间隙，改 row 的 g-0（即 gap: 0），而不是倒退回去用废功能。
横向排列这事，核心就三点：网格容器不能少、断点按设备设、高度靠 flex 拉齐。其余都是细节微调。
