Bootstrap网格怎么实现水平排列-Bootstrap教程-PHP中文网

Bootstrap 5 的 .row 默认水平排列，因已设 display: flex 和 flex-direction: row；列堆叠问题多因缺失 .row、列数超12或断点不匹配；推荐用 .row-cols- 实现等宽自动换行；对齐应通过 .row 的 .align-items- 和 .justify-content-* 控制；升级时需将 .no-gutters 替换为 .g-0。

bootstrap网格怎么实现水平排列

Bootstrap 5 的 `.row` 默认就是水平排列，别手动加 `flex-direction: row`

Bootstrap 5 使用 Flexbox 作为网格底层，.row 类已预设 display: flex 和 flex-direction: row，所以子元素（即 .col-*）天然水平排列。如果你发现列“堆成一列”，问题几乎肯定出在：没写 .row 容器、列数超 12、或用了响应式断点但视口不匹配。

常见错误现象：col-6 col-6 在小屏下错位、三列变成两行、col 没撑满父容器宽度。

确保每个 .col-* 都包裹在 .row 内，不能直接放在 .container 下
单行所有 .col-* 的数字之和不要超过 12（例如 col-4 col-4 col-4 ✅，col-6 col-6 col-6 ❌）
用 col-sm-6 这类带断点的类时，检查当前浏览器宽度是否达到对应断点（sm 是 ≥576px）

想让列等宽且自动换行？用 `.row-cols-` 而不是硬写 `.col-`

当需要“每行固定显示 N 列，内容多少都自动换行”时，.row-cols-* 是更干净的解法。它直接控制 .row 的子元素数量，不依赖列宽计算，也避免手动算 12 分割。

使用场景：商品卡片列表、图标栅格、响应式表单字段组。

VPS Bootstrap

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

下载

表示小屏每行 2 列，中屏起每行 3 列
子元素只需写（注意是纯 .col，无数字后缀），框架会自动均分宽度
比手写 col-6 col-6 col-4 col-4 col-4 更易维护，尤其内容动态增减时


遇到垂直居中或对齐错乱？优先检查 .align-items-* 和 .justify-content-*

.row 是 flex 容器，对齐行为由其自身类控制，不是子列的属性。很多人误在 .col 上加 align-self-center，结果无效——因为主轴是水平的，align-self 控制的是交叉轴（垂直方向），但前提是 .row 允许伸缩高度。

让所有列等高：给 .row 加 .align-items-stretch（默认值，通常不用显式写）
让列内容垂直居中：给 .row 加 .align-items-center

让列在行内水平居中（比如只有 2 列但想居中显示）：加 .justify-content-center

避免在 .col 上滥用 mt-auto 或 align-self，先确认是否该由 .row 统一控制

Bootstrap 4 升级到 5 后水平排列失效？重点查 .no-gutters 和 g-* 类
Bootstrap 5 废弃了 .no-gutters，改用 .g-0 控制间距。如果升级后列突然变宽溢出或错位，大概率是旧代码里还留着 .no-gutters，而新版本不认识它，导致 .row 回退到默认 gap 值（通常是 1rem），破坏原有布局流。

把所有 .no-gutters 替换为 .g-0


.g-1 到 .g-5 对应不同 gap 大小，数值越大间距越大；.gx-*/.gy-* 可分别控制水平/垂直间距
自定义 gap 时，直接在 .row 上写 style="gap: 0.5rem" 也完全有效，且优先级高于工具类

实际排版中，最常被忽略的是 .row 的存在必要性——它不只是个样式容器，而是 flex 格式化上下文的创建者。漏掉它，.col 就只是普通块级元素，再多个 col-3 也会垂直堆叠。