Bootstrap 栅格系统实现九宫格图片布局样式设置-Bootstrap教程-PHP中文网

九宫格必须用.row套.col，不能直接写9个div；因Bootstrap栅格依赖.row的flex布局和负外边距抵消.col内边距，跳过.row会导致宽度超100%、换行错乱、间隙异常。

bootstrap 栅格系统实现九宫格图片布局样式设置

九宫格必须用 `.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">@@##@@</div>
    <div class="col-4 col-sm-4 col-md-4">@@##@@</div>
    <div class="col-4 col-sm-4 col-md-4">@@##@@</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 只做等比缩放、不裁剪。若要视觉整齐，得加一层约束：

VPS Bootstrap

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

下载

强制统一高度：给每个 .col 加 style="height: 150px;"，再设 overflow: hidden
背景图替代：用 div + background-image + background-size: cover，更可控
避免用 width: 100%; height: 100% 直接设在上——这会破坏等比，导致拉伸

示例（安全裁剪）：

<div class="col-4">
  <div class="h-100 bg-dark" style="background-image: url('1.jpg'); 
              background-size: cover; 
              background-position: center;">
  </div>
</div>