应直接用 col-* 类包裹图标，避免额外容器；需引入 bootstrap icons 字体资源；小屏文字重叠时用 text-truncate 和 flex-column；等比缩放推荐 css grid 配 aspect-ratio。
用 col-* 类直接包裹图标，别套多层容器
bootstrap 的响应式网格本质靠 col- 类控制列宽，图标本身（比如 <i class="bi bi-heart"></i>）是行内元素，直接加 col-6 col-md-4 col-lg-3 就能生效。常见错误是把图标塞进额外的 <div class="icon-item"> 再套一层 <code>col，这会破坏网格计算精度，尤其在小屏下容易换行错乱。
正确做法是让图标自己成为网格项：
<div class="row g-3">
<div class="col-6 col-md-4 col-lg-3">
<i class="bi bi-alarm fs-2"></i>
<div class="small mt-1">闹钟</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<i class="bi bi-bell fs-2"></i>
<div class="small mt-1">通知</div>
</div>
<!-- 更多项... -->
</div>
注意：g-3 提供列间距，比手动加 mb-2 更可靠；fs-2 控制图标大小，避免不同尺寸图标撑开列高不一致。
图标字体加载失败时，bi 类名会失效
Bootstrap Icons 是独立资源，不随 Bootstrap CSS 自动加载。如果只引入了 Bootstrap 5.x 的 CSS 文件，但没加 Bootstrap Icons 的 CDN 或本地文件，所有 bi-* 类都会显示为空白或方块。
必须显式引入图标字体：
- 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 或字体文件 - 检查浏览器开发者工具 Elements 面板，确认
<i></i>元素是否渲染出实际字符（如\f701），而不是空内容
小屏下图标文字重叠？用 text-truncate 和 flex-column 控制布局流
当图标下方配文字且文字较长时，col-6 在手机上宽度有限，文字可能折行或溢出，导致视觉拥挤。不能只靠 text-center 解决。
更稳妥的组合是：
- 给文字容器加
text-truncate防止长文本撑开列宽 - 用
d-flex flex-column align-items-center显式定义图标与文字为垂直流，避免因行内元素对齐导致的基线偏移 - 必要时限制文字最大行数：
style="max-height: 3em; line-height: 1.5;"
示例：
<div class="col-6 col-md-4 col-lg-3 d-flex flex-column align-items-center"> <i class="bi bi-cloud-download fs-2"></i> <div class="small text-truncate mt-1" style="max-width: 100%;">下载最新版安装包</div> </div>
需要等比例缩放图标网格？避开 col 改用 aspect-ratio + grid
Bootstrap 原生 col 网格按固定列数划分，无法保证每个图标项的宽高比一致（比如都保持 1:1）。如果设计要求图标区域始终是正方形、且随屏幕缩放等比变化，col 就不够用了。
此时应切换为 CSS Grid，并利用现代属性：
- 父容器设
display: grid和grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) - 每项加
aspect-ratio: 1 / 1和display: flex居中图标 - Bootstrap 的
fs-*仍可用，但需配合height: 100%和align-items: center
这种方案绕开了 Bootstrap 网格的断点逻辑，更适合强视觉一致性需求——但要注意 Safari 15.4+ 才完全支持 aspect-ratio，旧版本需降级用 padding-top 百分比 hack。
