图标和卡片必须平级作为col的直接子元素，否则小屏下图标换行、列宽错乱、等高失效；正确结构是col内并列放置图标、文字和card，且card须为col直接子元素，不可嵌套在其他容器中。
图标和卡片必须平级嵌套在 col 里，不能塞进 card 内部
小屏下图标换行、列宽错乱、等高失效，90% 是结构错了——不是 CSS 没调好，是 col 没当好“响应式计算单元”。col 的宽度、换行、flex 对齐逻辑只作用于它的直接子元素。把 <i class="bi bi-heart"></i> 套进 <div class="card"></div> 再丢进 col，图标就失去独立响应能力：它被锁死在卡片内部，无法随断点缩放或对齐。
正确写法是让图标、文字、卡片都作为 col 的直系子元素：
<div class="col-6 col-md-4">
<i class="bi bi-heart fs-2"></i>
<div class="small mt-1">收藏</div>
<div class="card h-100">
<div class="card-body">...</div>
</div>
</div>
-
card必须是col的直接子元素；如果不需要边框/阴影，就别套card，直接放图标和文字 - 别用额外容器（如
<div class="icon-wrapper"></div>）包裹图标——它会干扰col的宽度计算 -
fs-2或fs-3统一图标尺寸，避免不同font-size导致列高不一致
bootstrap-icons 不显示？先确认字体是否加载成功
所有 bi-* 类名为空白或方块，基本等于字体根本没引入。Bootstrap CSS 文件不包含图标字体资源，bi-alarm 不会自动生效。
验证方法：打开开发者工具 → Elements → 找到 <i> 元素 → 查看其 ::before 伪元素的 content 值。应为类似 \f701 的 Unicode 字符；若为空，则字体未加载。
- 开发调试用 CDN：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">，必须放在 Bootstrap CSS 之后 - 构建项目用 npm：
npm install bootstrap-icons，再在入口文件中import 'bootstrap-icons/font/bootstrap-icons.css' - 别混用旧版类名（如
glyphicon-star），Bootstrap 5 已移除支持
小屏下图标和文字重叠或折行？用 d-flex flex-column + text-truncate
手机上 col-6 宽度有限，长文字折行后撑高列容器，导致图标偏移、上下间距失控。单纯加 text-center 或缩小字号只是掩盖问题。
真正可控的解法是显式定义布局流：
- 给
col加d-flex flex-column align-items-center，强制图标与文字垂直堆叠 - 文字容器加
text-truncate，防止溢出破坏列宽 - 必要时限制高度：
style="max-height: 2.4em; line-height: 1.2;"（对应两行不截断） - 图标右侧间距用
me-3（不是mr-3），兼容 RTL 场景
为什么漏掉 row 容器会导致卡片全部堆叠？
col 必须嵌套在 row 内才能触发 flex 行为和负 margin 清除。直接把 col 丢进 container 或 body，它就退化成普通块级元素，换行逻辑全失效——所有卡片会垂直堆叠，无视 col-md-4 等断点设置。
- 检查浏览器 Elements 面板，确认每个
col的父级是否有display: flex（即是否套了row） - 删掉所有卡片上的内联
width（如style="width: 17em;"），它会覆盖col的 flex-basis，导致横向溢出 - 推荐断点组合：
col-12（≤575px）、col-md-6（≥768px）、col-lg-4（≥992px）、col-xl-3（≥1200px）
结构细节比样式更关键——一旦 row 缺失或 col 嵌套错层，再精细的 CSS 也救不回网格行为。
