Bootstrap如何实现两栏高度随内容自适应等高-Bootstrap教程-PHP中文网

两栏高度不一致是因为.row未生效align-items-stretch：Bootstrap 4默认display: block（需加d-flex），Bootstrap 5虽默认flex但易被display: block/!important覆盖；且align-items仅作用于直接子元素.col-*，嵌套.row会破坏等高；卡片内底部对齐需.col加d-flex flex-column、.card加h-100、按钮加mt-auto；移动端需检查媒体查询是否重置align-items或flex-direction。

为什么两栏高度不一致，`align-items-stretch` 没反应

因为 .row 要生效 align-items-stretch，必须是真正的 flex 容器，且没被覆盖。bootstrap 4 的 .row 默认是 display: block，这个属性下 align-items 完全无效；bootstrap 5 才默认 display: flex，但如果你加了 style="display: block"、float、或自定义 css 里写了 .row { display: block !important }，那它就退化回块级布局，align-items 自然被忽略。

实操建议：

用浏览器开发者工具检查 .row 的 computed display 值，不是 flex 就得先修这个
Bootstrap 4 必须手动加 d-flex 类或自定义 .equal-height-row { display: flex !important }
Bootstrap 5 优先删掉所有覆盖 display 的样式，再确认没写 align-items: flex-start 这类覆盖

`.col-*` 是直接子元素吗？嵌套 `.row` 会破坏等高

等高只作用于 .row 的**直接子元素**（即 .col-*）。一旦你在某列里再包一层 <div class="row">，那内层的 <code>.row 就不再是外层 .row 的子项，它的子列也不再受外层 align-items 控制——结果就是“左边空，右边高”，左边死活拉不上去。

常见错误结构：

<div class="row align-items-stretch">
  <div class="col-md-6">
    <div class="row"><div class="col-12">内容</div></div>
  </div>
  <div class="col-md-6">内容很长</div>
</div>

正确做法：删掉中间那层 .row，或者给它也加 d-flex align-items-stretch（但通常没必要，直接用 .col 更干净）。

卡片、文字、按钮怎么对齐到底部？`h-100` 加在哪才有效

align-items-stretch 只让 .col-* 等高，不会让里面的 .card 或 <p></p> 也撑满。如果你希望每张卡片都填满整列高度，并让按钮钉在底部，就得两步走：

给 .card（或你真正要等高的容器）加 h-100 —— 不是加在 .col 上
给 .col 加 d-flex flex-column，再给按钮加 mt-auto

示例：

VPS Bootstrap

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

下载

<div class="col-md-6 d-flex flex-column">
  <div class="card h-100">
    <div class="card-body">
      <p>标题和正文</p>
      <button class="btn btn-primary mt-auto">操作</button>
    </div>
  </div>
</div>

注意：.col 本身不能设 height: 100% 或 min-height，否则会干扰 stretch 行为；所有内部元素也应确保 box-sizing: border-box 生效。

移动端折叠后还想要等高？小心媒体查询悄悄关掉它

桌面端正常，切到小屏（如 sm 或 xs）后两栏变单列、高度又不一致了？大概率是某处媒体查询重写了 align-items：

查自定义 CSS 是否含类似 @media (max-width: 768px) { .row { align-items: flex-start !important; } }
响应式断点里如果用了 flex-direction: column，align-items: stretch 在垂直方向上需要容器有明确高度（比如 min-height: 100vh），否则无效
单列堆叠时等高本无意义，但若真需要（比如卡片并排换为上下），可改用 d-grid + grid-template-rows: 1fr 1fr，比 Flex 更可控

真正卡住人的，从来不是“怎么写”，而是“谁在背后偷偷改了 display 或 align-items”——尤其是那些带 !important 的全局样式或第三方插件 CSS。