怎样解决Bootstrap侧边栏与正文高度不一致-css教程-PHP中文网

侧边栏和正文高度不一致的根本原因是父容器未形成统一高度上下文，需确保二者同属一个具有min-height: 100vh的.flex容器，且为同一.row的直接子元素，避免position: fixed或嵌套导致脱离文档流。

怎样解决bootstrap侧边栏与正文高度不一致

侧边栏和正文高度不一致，本质是父容器没形成统一高度上下文

不是侧边栏“矮”或正文“高”，而是两者分属不同高度计算链：侧边栏常靠内容撑开，正文可能被fixed-top、overflow: hidden或缺失min-height截断。最常见的情况是.sidenav和.main不在同一级.row下，或者其中一个被position: fixed抽离了文档流。

检查浏览器开发者工具里两者的computed height，如果一个是auto、另一个是具体像素值，就说明它们根本不在同一个 flex 或 grid 上下文中对齐。

确保.sidenav和.main是同一.row的直接子元素，结构必须是：

<div class="row">
<div class="col-md-3 sidenav"></div>
<div class="col-md-9 main"></div>
</div>

如果用了fixed定位侧边栏，正文必须手动加margin-left并设min-height: 100vh，否则正文高度仍按视口减去fixed元素后计算
避免把.main嵌套在.sidenav内部——这种结构会让.main继承一个无高度约束的父容器，导致h-100完全失效

用`d-flex` + `h-100`强制拉齐，但必须加对位置

h-100不是万能胶，它只在父元素有明确高度时才生效。直接给.sidenav或.main加h-100往往无效，因为它们的父级.row高度仍是auto。

VPS Bootstrap

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

下载

顶层容器（如body或包裹.row的div）需先设min-height: 100vh
.row本身加d-flex（Bootstrap 4 必须加，Bootstrap 5 默认但易被覆盖）
.sidenav和.main作为.row的直接子项，再加h-100才有意义
若其中一栏含.card，记得h-100要落到.card上，而不是.col上——.col只是 flex item，不参与内部高度传递

响应式切换时高度突然错位，大概率是媒体查询重置了`align-items`

PC 端看着正常，切到平板或手机就错位，几乎可以锁定是某处 CSS 在断点中悄悄改了对齐方式。Bootstrap 自身不会在响应式类里动align-items，但项目里的自定义样式或第三方插件会。

搜索项目 CSS 中类似@media (max-width: 992px) { .row { align-items: flex-start; } }的规则，删掉或改为stretch
如果侧边栏在小屏下隐藏（如用d-none d-md-block），正文.col会自动变成col-12，此时h-100失去参照——可加d-md-flex控制仅在中屏以上启用 flex 拉伸
检查.sidenav是否用了position: sticky或overflow-y: auto，这两者在移动端可能触发渲染 bug，导致高度计算滞后