九宫格必须用.row套.col，不能直接写9个div；因Bootstrap栅格依赖.row的flex布局和负外边距抵消.col内边距，跳过.row会导致宽度超100%、换行错乱、间隙异常。
九宫格必须用 .row 套 .col，不能直接写 9 个 div
Bootstrap 的栅格系统依赖 flex 布局和预设的 margin/padding 行为，.row 负责清除浮动（v3）或设置 display: flex（v4+），同时通过负外边距抵消 .col 的内边距。如果跳过 .row，9 个 .col 会因 padding 冲突导致总宽度超 100%，在小屏下换行错乱、间隙异常。
正确结构只有一种：
<div class="container">
<div class="row">
<div class="col-4 col-sm-4 col-md-4"><img src="1.jpg" class="img-fluid" alt="Bootstrap 栅格系统实现九宫格图片布局 样式设置" ></div>
<div class="col-4 col-sm-4 col-md-4"><img src="2.jpg" class="img-fluid" alt="Bootstrap 栅格系统实现九宫格图片布局 样式设置" ></div>
<div class="col-4 col-sm-4 col-md-4"><img src="3.jpg" class="img-fluid" alt="Bootstrap 栅格系统实现九宫格图片布局 样式设置" ></div>
<!-- 共 9 个，每行 3 个 -->
</div>
</div>-
.col-4是核心：12 列均分 → 每列占 4 份，3 个刚好一整行 - 必须加
.img-fluid（v4+）或.img-responsive（v3），否则图片不随列宽缩放 - 别用
.col-xs-4：v4 已废弃xs前缀，.col-4就是 xs 级别
col-4 在不同断点下要不要重复写
要写，但不是“必须全写”。.col-4 本身已覆盖所有屏幕（包括手机竖屏），所以仅写这一类就能实现九宫格；但若想在大屏上变 4×4（16 宫格）或小屏堆成单列，则需叠加断点类。
常见组合：
- 始终 3×3：只用
.col-4 - 手机竖屏单列 + 平板起 3×3：
.col-12 col-sm-4 - 手机/平板 3×3，桌面变为 4×4：
.col-4 col-lg-3（因为 12 ÷ 4 = 3）
注意：.col-lg-3 不会覆盖 .col-4，而是“在 ≥992px 时生效”，小屏仍走 .col-4。
图片变形、拉伸、留白不一致？关键在 img-fluid 和容器高宽控制
九宫格里图片尺寸不统一，本质是原始图宽高比不同，而 .img-fluid 只做等比缩放、不裁剪。若要视觉整齐，得加一层约束：
- 强制统一高度：给每个
.col加style="height: 150px;"，再设overflow: hidden - 背景图替代
<img alt="Bootstrap 栅格系统实现九宫格图片布局 样式设置" >：用div+background-image+background-size: cover，更可控 - 避免用
width: 100%; height: 100%直接设在<img alt="Bootstrap 栅格系统实现九宫格图片布局 样式设置" >上——这会破坏等比，导致拉伸
示例（安全裁剪）：
<div class="col-4">
<div class="h-100 bg-dark"
style="background-image: url('1.jpg');
background-size: cover;
background-position: center;">
</div>
</div>为什么用 .container 而不是 .container-fluid
.container 在中大屏有最大宽度限制（如 v4 是 1140px），能防止九宫格在超宽屏上被拉得太开、图片过小；.container-fluid 100% 占满视口，适合全屏轮播或 banner，但对九宫格这种内容密度高的布局，容易让单图宽度失控。
除非你明确要做「铺满整个屏幕的九宫格」且所有设备都适配，否则默认选 .container。它还自带水平居中，省去额外 margin: 0 auto。
真正容易被忽略的是：九宫格的语义本质是「网格内容容器」，不是「全屏画布」。一旦用了 .container-fluid，又没配合 max-width 或媒体查询限制列宽，手机横屏时可能每行显示不止 3 个，破坏九宫格结构。
