卡片必须用col-类包裹，因card自身无栅格行为；错误写法直接使用card导致移动端横排或溢出；正确做法是将card放入col（如col-12、col-md-6）并由row统一管理。
卡片结构必须用 col- 类包裹，不能只靠 card 自身响应
Bootstrap 的 card 本身不带栅格行为，堆叠与否取决于它所在的容器是否参与响应式布局。常见错误是直接写：
<div class="card">...</div><div class="card">...</div>这样在移动端永远横排（或溢出），因为没触发 Bootstrap 的断点折叠逻辑。
正确做法是把每张卡包进 col，再用 row 统一管理：
-
col-12：所有断点下独占一行（移动端默认堆叠） -
col-md-6：≥768px 时两列，col-12（自动堆叠） -
col-lg-4：≥992px 时三列，更小屏幕依次回退
图标必须用 svg 或 i 配合 text-center + mb-3 控制垂直节奏
图标位置松散、上下错位是移动端堆叠后最显眼的违和点。Bootstrap 不提供“卡片图标居中+固定尺寸+间距统一”的原子类，得手动补。
- 避免用
float或position: absolute，会破坏文档流，堆叠时图标可能重叠或偏移 - 推荐结构：
<div class="text-center mb-3"><svg width="48" height="48">...</svg></div> - 如果用 Font Awesome，务必加
fa-fw（fixed width）防止文字错位，例如：<i class="fas fa-home fa-fw text-primary"></i>
卡片内边距要用 py-4 px-3 这类工具类，别依赖自定义 CSS
很多人写 .card { padding: 1.5rem; }，结果在小屏下内容挤到边缘——因为固定值无法随视口缩放呼吸。Bootstrap 的间距工具类（px-3、py-4 等）是基于 rem 和断点映射的，能随屏幕变化微调。
-
px-3在 xs 是 1rem，sm 是 1.5rem，lg 是 2rem —— 小屏留白少，大屏更舒展 - 避免混用
pt-4 pb-4和py-4，后者语义清晰且不易漏写 - 标题用
h5 mb-2，正文用text-muted small，保持层级压缩感，避免堆叠后卡片高度差异过大
移动端堆叠失效？检查是否漏了 viewport meta 或用了 container-fluid 错误嵌套
最隐蔽的坑：页面能正常显示，但卡片就是不堆叠。大概率是以下两个低级错误：
- HTML
缺少：<meta name="viewport" content="width=device-width, initial-scale=1">—— 没这句，Bootstrap 的媒体查询根本不会触发 - 把
row直接塞进container-fluid再套一层container，导致栅格计算错乱；应选其一：container（居中带最大宽度）或container-fluid（全宽），不要嵌套 - 使用了
col-auto或col（无断点）——它们不响应屏幕尺寸，始终按内容宽度撑开，堆叠失效
复杂点在于：图标尺寸、内边距、断点类、viewport 四者必须协同生效，漏一个，堆叠就“看起来差不多但总觉得不对劲”。
