Bootstrap如何实现响应式的带图标卡片列表布局-Bootstrap教程-PHP中文网

图标与卡片必须同层嵌套于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。

图标和卡片必须共用同一层栅格容器

直接把塞进 card 里再套 col 是错的；正确做法是让图标和卡片内容一起成为 col 的子元素，且 col 必须包裹在 row 内。否则小屏下图标会换行错位、卡片列宽计算失准。

常见错误：

—— 这会让图标被卡在卡片内部，失去独立响应能力。

col 类必须直接作用于包含图标的最外层容器，比如 收藏
如果要加卡片边框/阴影，用 包裹图标和文字，但 card 必须是 col 的**直接子元素**
漏掉 row 容器会导致所有 col 垂直堆叠——检查浏览器 Elements 面板，确认父级是否有 display: flex


Bootstrap Icons 字体必须显式引入
bi-* 类名不会自动生效。只引入 Bootstrap CSS 文件， 会显示为空白或方块，不是图标没写对，是字体资源根本没加载。
验证方法：打开开发者工具 → Elements → 找到  元素，看其伪元素 ::before 是否渲染出 Unicode 字符（如 \f701）；若 content 为空，则字体未加载。

开发调试用 CDN：

构建项目时用 npm：npm install bootstrap-icons，再在入口 CSS 或 JS 中 import 对应的 CSS 文件
别混用旧版图标类名（如 glyphicon），Bootstrap 5 已移除，仅支持 bi-*


小屏下图标+文字重叠？用 d-flex flex-column + text-truncate

手机上 col-6 宽度有限，长文字会折行、撑高列容器，导致图标和文字错位或溢出。单纯加 text-center 或 small 无法根治。
真正可控的组合是垂直流布局 + 截断控制：

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										

给 col 加 d-flex flex-column align-items-center，强制图标与文字垂直堆叠
文字容器加 text-truncate，防止长文本破坏列宽
必要时限制高度：style="max-height: 2.4em; line-height: 1.2;"（对应两行，避免截断不干净）
示例：
系统设置（高级选项）



等高对齐不能只靠 h-100，得配合 flex-column 和 mt-auto

多张带图标和文字的卡片并排时，标题长短不同、文字行数不一，会导致底部按钮或价格标签高低不齐——这是视觉割裂最明显的点。
h-100 单独加在 card 上只能拉高容器，无法控制内部元素对齐位置。

在 card-body 上加 d-flex flex-column h-100

关键内容（如图标）保持默认位置，描述文字加 flex-grow-1 吸满剩余空间
操作按钮或价格标签加 mt-auto，自动贴到底部
避免用 min-height 硬设像素值——不同设备字体缩放后，固定高度会留白或截断

容易被忽略的是：如果卡片内没有图片，card-img-top 类完全不用加；但只要用了，就必须配 img-fluid，否则小屏下图片会横向溢出容器边界。