Bootstrap如何设置Flex项目在容器中自动换行且垂直居中-Bootstrap教程-PHP中文网

flex容器需显式添加flex-wrap才能换行，.d-flex默认nowrap；多行垂直居中须用align-content-center而非align-items-center，且需容器有高度余量并启用换行。

bootstrap如何设置flex项目在容器中自动换行且垂直居中

Flex容器必须显式加 `flex-wrap` 才能换行

Bootstrap 的 .d-flex 默认是 flex-wrap: nowrap，哪怕内容超出容器宽度，也不会折行——它只会横向溢出或滚动。你不能指望 .row 的行为自动迁移到自定义 .d-flex 容器上。.row 是特例，它默认启用了 flex-wrap: wrap；而 .d-flex 只负责开启 Flex 布局，不附带换行逻辑。

要让子项在宽度不足时自动换行，必须手动加 flex-wrap 类：

<div class="d-flex flex-wrap">...</div> —— 全断点启用换行
<div class="d-flex flex-wrap-md">...</div> —— 仅中屏及以上换行（需确认 Bootstrap 构建版本含响应式类）
<div class="d-flex flex-wrap-reverse">...</div> —— 换行方向反转（最后一行在顶部）

⚠️ 常见错误：只加 d-flex 和 align-items-center，却漏掉 flex-wrap，结果文字或卡片挤成一行、撑破容器。

`align-items-center` 对单行有效，多行需改用 `align-content-center`

align-items-center 控制的是“每行内部子项在交叉轴上的对齐”，即它让每一行里的所有项目都垂直居中——但前提是这些项目在同一行内。一旦发生换行，align-items-center 不会影响“行与行之间的垂直分布”。此时若想让多行整体在容器里垂直居中（比如三行内容上下留白均等），必须用 align-content-center（或 align-content-around / align-content-between）。

但注意：align-content-* 类生效有硬性前提：

父容器必须是 Flex 容器（已加 d-flex）
必须已启用换行（已加 flex-wrap）
容器在交叉轴（默认为纵轴）上要有剩余空间——即容器高度 > 所有行内容总高度

如果容器高度刚好被内容撑满（例如没设 min-height 或 min-vh-100），align-content-center 会完全无效。推荐搭配 min-vh-100 或 h-100 使用。

VPS Bootstrap

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

下载

长文本/无空格内容会破坏换行效果

即使加了 flex-wrap，像 UUID、URL 或连续中文段落这类无自然空格的内容，默认仍会整块溢出——因为子元素自身设置了 white-space: nowrap（如 .badge、.text-truncate 或原生 <span></span>），压制了 Flex 的换行能力。

解决方法不是调 Flex 类，而是重置文本行为：

给子元素加 text-break 类，并确保其 white-space 被覆盖：style="white-space: normal;"
或写轻量自定义类：.force-wrap { white-space: normal !important; }，再加到对应元素上
避免混用 text-nowrap 或 text-truncate——它们和换行互斥

⚠️ 别指望 text-break 单独生效：它依赖 overflow-wrap: break-word，而该属性会被 white-space: nowrap 直接屏蔽。

垂直居中 + 自动换行的典型结构组合

常见需求是：一组卡片或标签，在容器内既能随屏幕宽度自动换行，又整体垂直居中显示。这时不能只靠 align-items-center，得组合使用：

<div class="d-flex flex-wrap align-content-center justify-content-center min-vh-100">
  <div class="bg-primary text-white px-4 py-2 m-1">Item 1</div>
  <div class="bg-secondary text-white px-4 py-2 m-1">Item 2</div>
  <div class="bg-success text-white px-4 py-2 m-1">Long item with no space</div>
</div>

关键点：