必须用row+col-结构，一个row包所有产品列，禁止单卡套row或漏写row；断点推荐col-12、col-md-6、col-lg-4、col-xl-3；图片必加img-fluid，间距统一用g-和py-*，避免混用margin。
产品展示网格必须用 row + col-*，不能每个卡片单独套 row
直接把每个 .card 包一层 .row 是最常见错误——结果每行只有一列，上下留白失控，.row 的负 margin 还会和外层容器冲突。正确结构是：一个 .row 包所有产品列，每列用 .col-* 控制数量。
常见错误现象：
- 卡片左右溢出容器边界（漏写
.row或错放位置） - 小屏下仍显示两列甚至三列（断点类没写全或写反了顺序）
- 图片被拉伸或裁切（
.card-img-top上写了固定height）
实操建议：
-
.row必须是.container或.container-fluid的直接子元素 - 列内卡片加
h-100保证等高，避免视觉参差 - 图片一律加
img-fluid，别信“我图够规范不用加”
断点选 md 而不是 sm，更贴合真实访问设备
用 col-sm-6 看似“手机两列”，但实际 iPad 竖屏（768px）就触发了，而多数产品图在 768px 下已显拥挤；真正需要两列的起点是平板横屏或小笔记本，md（768px）刚好卡在这个分界点。
推荐组合（移动优先）：
-
col-12：手机竖屏（≤575px），强制单列 -
col-md-6：≥768px，平板横屏/小笔记本，两列 -
col-lg-4：≥992px，标准笔记本，三列 -
col-xl-3：≥1200px，大屏/4K，四列
注意：col-12 在移动端可省略不写（默认行为），但 col-md-6 这类断点类必须显式声明，否则小屏下会继承上一级宽度导致错乱。
间距统一用 g-* 和 py-*，别混用 margin/padding
g-3 是作用在 .row 上的 gutter 控制器，它自动处理列间+行间间隙，且响应式断点切换时不会突变；手动加 mb-3 到每个 .col 里，等于叠加了两层间距，尤其在 md 断点切换时容易跳变。
性能与兼容性影响：
-
g-3对应1.5rem（默认 $spacer = 1rem），足够呼吸感又不空洞 - 取消某行水平 gutter？写
gx-0，别用mx-0去抵消——后者破坏 flex 主轴对齐 - 整行上下留白用
py-5，比给每个.card加mt-4 mb-4更稳定
Bootstrap Icons 必须显式引入，否则图标全空白
电商页常配图标说明功能（如“包邮”“7天退”），但很多人只引入了 Bootstrap CSS，没加 Bootstrap Icons 字体资源，结果所有 bi-* 类都显示为方块或空白。
实操要点：
- CDN 引入必须放在
中，且在 Bootstrap CSS 之后：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
- 图标直接套
col-*，别再包一层<div class="icon-item">——多一层 DOM 就多一层 flex 计算误差<li>文字说明用 <code>d-flex flex-column align-items-center垂直居中，避免基线对齐偏移
真正难调的不是列数或断点，而是当用户缩放浏览器、切换横竖屏、或用 Safari 浏览时，g-* 和 img-fluid 的组合是否还稳——这些细节不测到真机，光看开发工具模拟器容易漏掉。
