图标与卡片必须同层嵌套于row-col栅格中，col需直接包裹图标及文字，card仅作内容容器且须为col直接子元素；Bootstrap Icons需显式引入字体文件，否则图标不显示；小屏下用d-flex flex-column align-items-center+text-truncate实现图文垂直对齐与截断；等高对齐需card-body加d-flex flex-column h-100，文字flex-grow-1，底部元素mt-auto。
图标和卡片必须共用同一层栅格容器
直接把 <i></i> 塞进 card 里再套 col 是错的；正确做法是让图标和卡片内容一起成为 col 的子元素，且 col 必须包裹在 row 内。否则小屏下图标会换行错位、卡片列宽计算失准。
常见错误：<div class="col"><div class="card"><i class="bi bi-star"></i></div></div> —— 这会让图标被卡在卡片内部，失去独立响应能力。
-
col类必须直接作用于包含图标的最外层容器，比如<div class="col-6 col-md-4"> <i class="bi bi-heart fs-2"></i><div class="small mt-1">收藏</div> </div> - 如果要加卡片边框/阴影，用
<div class="card h-100"> 包裹图标和文字，但 <code>card必须是col的**直接子元素** - 漏掉
row容器会导致所有col垂直堆叠——检查浏览器 Elements 面板，确认父级是否有display: flex - 开发调试用 CDN：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> - 构建项目时用 npm：
npm install bootstrap-icons，再在入口 CSS 或 JS 中 import 对应的 CSS 文件 - 别混用旧版图标类名（如
glyphicon），Bootstrap 5 已移除，仅支持bi-* - 给
col加d-flex flex-column align-items-center，强制图标与文字垂直堆叠 - 文字容器加
text-truncate，防止长文本破坏列宽 - 必要时限制高度：
style="max-height: 2.4em; line-height: 1.2;"（对应两行，避免截断不干净） - 示例：
<div class="col-6 col-md-4 d-flex flex-column align-items-center"> <i class="bi bi-gear fs-2"></i><div class="small text-truncate mt-1" style="max-width: 80px;">系统设置（高级选项）</div> </div> - 在
card-body上加d-flex flex-column h-100 - 关键内容（如图标）保持默认位置，描述文字加
flex-grow-1吸满剩余空间 - 操作按钮或价格标签加
mt-auto，自动贴到底部 - 避免用
min-height硬设像素值——不同设备字体缩放后，固定高度会留白或截断
Bootstrap Icons 字体必须显式引入
bi-* 类名不会自动生效。只引入 Bootstrap CSS 文件，<i class="bi bi-alarm"></i> 会显示为空白或方块，不是图标没写对，是字体资源根本没加载。
验证方法：打开开发者工具 → Elements → 找到 <i></i> 元素，看其伪元素 ::before 是否渲染出 Unicode 字符（如 \f701）；若 content 为空，则字体未加载。
小屏下图标+文字重叠？用 d-flex flex-column + text-truncate
手机上 col-6 宽度有限，长文字会折行、撑高列容器，导致图标和文字错位或溢出。单纯加 text-center 或 small 无法根治。
真正可控的组合是垂直流布局 + 截断控制：
等高对齐不能只靠 h-100，得配合 flex-column 和 mt-auto
多张带图标和文字的卡片并排时，标题长短不同、文字行数不一，会导致底部按钮或价格标签高低不齐——这是视觉割裂最明显的点。
h-100 单独加在 card 上只能拉高容器，无法控制内部元素对齐位置。
容易被忽略的是：如果卡片内没有图片，card-img-top 类完全不用加；但只要用了，就必须配 img-fluid，否则小屏下图片会横向溢出容器边界。
