怎么用Bootstrap实现网格内容自动换行-Bootstrap教程-PHP中文网

col不换行是因flex布局默认不换行，需确保row有flex-wrap:wrap；高度不一致导致错位可用align-items-start或row-cols-*解决。

怎么用bootstrap实现网格内容自动换行

为什么 `row` 里的 `col` 不换行？

默认情况下，Bootstrap 的 row 是 display: flex，子项 col 会尽可能挤在同一行。即使内容超出容器宽度，也不会自动折到下一行——这是 Flex 布局的默认行为，不是 bug。

常见错误是以为加了 col-6 或 col-md-4 就能“按需换行”，结果发现所有列硬塞在一行，溢出或横向滚动。

row 缺少 flex-wrap: wrap（Bootstrap 5 默认已启用，但旧版或自定义 CSS 可能覆盖）
手动设了 white-space: nowrap 或 flex-shrink: 0 等干扰样式
用了 col-auto 却没配合 flex-wrap，导致宽度撑满不折行

用 `flex-wrap: wrap` 让列真正换行

Bootstrap 5+ 的 row 默认带 flex-wrap: wrap，所以只要确保没被覆盖，换行就自然发生。检查方式：打开浏览器开发者工具，看 .row 元素的 computed styles 中 flex-wrap 是否为 wrap。

如果被覆盖，最直接的修复是显式加类：

<div class="row flex-wrap">
  <div class="col-6">Item 1</div>
  <div class="col-6">Item 2</div>
  <div class="col-4">Item 3</div>
  <div class="col-4">Item 4</div>
  <div class="col-4">Item 5</div>
</div>

flex-wrap 是 Bootstrap 5 内置的实用类，无需额外 CSS。注意：Bootstrap 4 没有这个类，需自己加 style="flex-wrap: wrap" 或写 CSS 规则。

当内容高度不一致时，怎么避免空白错位？

Flex 换行后，如果每行的子项高度不同（比如文字行数不同），下一行会从“最高项的底边”开始对齐，造成视觉断层。这不是换行失效，而是 align-items: stretch（默认值）在起作用。

VPS Bootstrap

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

下载

解决方法是改对齐方式：

加 align-items-start 到 row，让所有列顶部对齐
加 h-100 到每个 col，强制等高（适合卡片类布局）
用 row-cols-* 类（如 row-cols-2）替代单个 col，它会按列数分组并自动换行，且内部统一高度处理更可控

例如：

 —— 这比手写一堆 col-md-4 更可靠，尤其在响应式下。用 row-cols-* 替代手动 col 类更省心
row-cols-* 是 Bootstrap 5 引入的“列数驱动”模式：它不关心每列多宽，只保证每行固定数量子项，自动换行、等高、间隙统一。
适用场景：图库、产品列表、功能卡片等不需要精确栅格宽度，只求“每行 N 个”的情况。


row-cols-2 → 每行最多 2 个，小屏也保持

row-cols-md-3 → ≥768px 时每行 3 个，小屏回落为 1 个
搭配 g-*  控制间隙，如 g-4


它底层仍是 Flex + flex-wrap，但省去了计算 col 宽度、响应断点匹配的麻烦，也不容易因漏写断点类（如只写 col-6 没写 col-md-4）导致错乱。
真要精细控制宽度（比如某列占 7/12，另两列各占 2.5/12），还是得回退到传统 col 类，但务必确认 row 的 flex-wrap 生效且无高度干扰样式。