最稳起点是row容器搭配col-列组合；须避免单卡套row或漏写row，按需选用col-md-4等断点类，图片必加img-fluid，间距统一用g-和py-*，断点推荐col-12 col-sm-6 col-md-4 col-lg-3。
用 row 和 col-* 是最稳的起点
Bootstrap 的网格系统不是靠“模板”或“组件”堆出来的，而是靠 row 容器 + col 列的组合撑起来的。产品展示这种固定结构，直接套用原生栅格比找插件更可靠、更易调、加载也更快。
常见错误是把每个产品卡片单独包一层 row，结果每行只有一列、上下留白失控；或者漏掉 row，让 col 直接挂在 container 下，导致负 margin 失效、左右溢出。
- 每个产品行必须包裹在
row内，row本身不能嵌套row - 一行放几个产品，就用对应数量的
col-md-4（3列）、col-md-3（4列）等，别硬凑col-6拼两列再加offset - 移动端默认堆叠，所以
col-12可以省略不写，但col-md-*这类断点必须明确，否则小屏下会错乱
card 组件配 img-fluid 才不会拉伸变形
产品图一糊，整个展示就垮了。Bootstrap 的 card 默认不限制图片尺寸，而 img 标签又自带原始宽高，不加控制就会撑破列宽或压缩失真。
关键不是换图，而是加一个 class：img-fluid。它本质就是 max-width: 100%; height: auto;，但你手写容易漏掉 height: auto，导致等比缩放失效。
- 所有产品图都加
img-fluid，哪怕你用了object-fit: cover也要加，否则响应式断点切换时仍可能跳变 - 别给
card-img-top设固定height，那会让不同比例图片强行裁切，用户看不到全貌 - 如果需要统一高度（比如瀑布流感），改用
min-height+object-fit: cover，并确保父容器有overflow: hidden
间距靠 g-3 或 py-4，别用 margin 手动调
产品卡片之间空太大、太小、不一致？90% 是因为混用了自定义 margin 和 Bootstrap 的间距工具类。一旦加了 mb-3 又加 row 自带的 gutter，实际间距就翻倍了。
Bootstrap 5+ 的 g-* （如 g-3）是作用在 row 上的 gutter 控制，它会自动处理列间和行间间隙，且不影响响应式断点行为。
- 统一用
row g-4控制列间距，用py-5控制整行上下留白，避免在每个col里塞mb-3 -
g-*的数值对应 $spacer * n（默认 $spacer = 1rem），g-3≈ 1.5rem，够大多数产品卡呼吸 - 如果要取消某行的 gutter，直接写
gx-0（水平）或gy-0（垂直），别用mx-0去抵消
响应式断点选 md 而不是 sm 更符合产品场景
很多人在手机上看到“一行一卡”就急着用 col-sm-6，结果平板横屏时还是两列，白白浪费空间。产品页的真实访问主力是中大屏：iPad、Surface、笔记本，而不是小屏手机。
sm 断点（576px）太早触发，会导致 768px 平板竖屏就变成两列，而多数产品图在这宽度下已显拥挤；md（768px）才是平衡点——手机竖屏堆叠，横屏/平板开始铺开，桌面端稳定四列。
- 推荐搭配：
col-12 col-sm-6 col-md-4 col-lg-3，即：手机1列 → 小平板2列 → 平板/小桌面3列 → 大桌面4列 - 别迷信“全屏铺满”，Bootstrap 的
container有最大宽度限制，强行用col-xl-2会让卡片过窄，文字折行难读 - 如果产品描述较长，可降一级断点，比如用
col-md-6 col-lg-4，优先保内容可读性，而不是列数多
真正卡住进度的，往往不是“怎么排”，而是图片没设 img-fluid 导致布局抖动，或是 row 和 col 的嵌套关系没理清。只要这两处对了，网格本身几乎不会出问题。
