正确写法是将d-flex加在.col的直接子元素上，如…；直接给.col加d-flex会因flex-item与flex-container双重角色冲突导致布局异常。

为什么直接给 .col 加 d-flex 会出问题

因为 .col 本身已是 flex item（父级 .row 是 flex 容器），它默认的 flex: 0 0 auto 会压制你后续加的 d-flex 行为——此时你不是在“让 col 成为容器”，而是在一个已被 flex 管理的子元素上强行再启一套 flex 上下文，结果常是内容不换行、对齐失效、甚至高度塌陷。

.col 内部需要 Flex 布局时，正确写法是什么

把 d-flex 类加在 .col 的**直接子元素**上，而不是 .col 自身。这个子元素就是你要布局的内容容器，比如 <div class="card"> 或 <code><div class="content-wrapper">。 <ul> <li>✅ 正确：<code><div class="col"><div class="d-flex justify-content-between">…</div></div>

❌ 错误：<div class="col d-flex">…</div>（除非你明确要覆盖 col 的 flex-item 行为）

如果需垂直排列且等高，.col 内部容器还要加 h-100，否则 flex 高度无基准

避免在该内部容器上同时用 margin 和 gap 工具类，gap 只对 flex/grid 容器生效，margin 会叠加导致间距翻倍

想让多个 .col 在外部 flex 容器里正常换行，怎么办

当 .col 被放进一个非 .row 的自定义 flex 容器（比如 <div class="d-flex">）时，它们默认不会换行，容易横向溢出。 <ul> <li>给外部容器加 <code>.flex-wrap（即 flex-wrap: wrap）

给每个 .col 显式设宽度，如 .col-12 .col-md-6，别只靠 flex: 1 让它自适应——.col 的基础样式依赖断点类才能生效

不要对 .col 直接设 width 或 max-width，改用 Bootstrap 的 w-50、mw-100 等工具类

检查浏览器开发者工具里 flex-basis 是否被重置：某些主题或插件会覆盖 .col 的 flex: 0 0 auto

align-items-stretch 在 .row 中为何有时不生效

因为 .row 默认是 flex 容器，但它的 align-items 初始值是 normal，不是 stretch。只有显式加 .align-items-stretch 才能触发等高拉伸。

VPS Bootstrap

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

下载

• 删掉 .col 或其子元素上的 height: 100%、min-height，它们会干扰 stretch 的自然计算
• h-100 必须作用于 .col 内部的块级容器（如 .card），而非 .col 本身
• 子级若再嵌套 .row，它不会继承父级的 align-items，需单独加类
• IE11 不支持 align-items-stretch，如需兼容，得用 JS 拉高或 fallback 到 table-cell

真正容易被忽略的是：Flex 行为是否被某处 box-sizing: content-box 或未重置的 padding/border 拉偏了高度计算——所有参与 stretch 的层级，都得确保 box-sizing: border-box 生效。