图标和卡片必须共用同一层栅格容器，否则小屏下图标换行、列宽错乱、等高失效；col必须直接包裹图标和卡片，因col是响应式计算单元，图标塞进card内会失去独立响应能力，导致对齐错位与高度不一致。
图标和卡片必须共用同一层栅格容器，否则小屏下图标换行、列宽错乱、等高失效——这不是样式没调好，是结构错了。
为什么 col 必须直接包裹图标和卡片，而不是把图标塞进 card 里
常见错误写法：<div class="col"><div class="card"><i class="bi bi-star"></i></div></div>。这会让图标被锁死在卡片内部，失去响应能力：小屏时卡片宽度收缩，但图标无法独立居中或垂直对齐；card 高度由内容撑开，导致网格行高不一致。
-
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；如果要边框/阴影，card必须是col的**直接子元素**，不能嵌套在其他div里
bootstrap-icons 不显示？先检查字体是否加载成功
所有 bi-* 类名为空白或方块，99% 是字体资源根本没引入。Bootstrap CSS 文件不包含图标字体，bi-alarm 不会自动生效。
- 开发调试用 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' - 验证方法：打开开发者工具 → Elements → 找到
<i>元素 → 查看::before伪元素的content值，应为类似\f701的 Unicode 字符；若为空，则字体未加载 - 别混用旧版类名（如
glyphicon），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.5em; line-height: 1.25;"，避免多行文字拉伸列高 - 图标尺寸统一用
fs-2或fs-3，避免不同font-size导致列高不一致
等高卡片 + 图标垂直居中，关键在 card-body 的 flex 布局
即使用了 h-100，文字长度不一时，底部按钮或描述仍会浮动，图标在卡片内无法稳定居中。
-
card本身加h-100 -
card-body加d-flex flex-column h-100 - 文字内容容器加
flex-grow-1（如<p class="flex-grow-1">），占满剩余空间 - 底部元素（如按钮）加
mt-auto，自动贴底 - 图标若放在
card-body外（即和card同级），则需靠col的d-flex控制，而非依赖卡片内部布局
最易被忽略的是 row 容器的存在感——漏掉它，所有 col 会垂直堆叠；浏览器 Elements 面板里看不到 display: flex，基本就是这个原因。结构对了，样式才可控。
