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

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

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

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

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

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

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

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

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

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

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

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

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

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

侧边栏内图标/文字不居中，会间接放大高度差感

图标比文字低半像素、菜单项行高不一致、.nav-link里padding-top和padding-bottom不对称……这些视觉偏差虽不改变真实高度，但在对比强烈时会让人误判“高度不一致”。

1. 图标用<i class="bi">时无需额外设置，但若混用<img>，务必加style="vertical-align: -.125em;"
2. .nav-link建议统一用d-flex align-items-center包裹图标和文字，而非依赖line-height硬调
3. 避免给.sidenav设height: 100%——它会锁死高度，导致内容溢出或留白；用min-height: 100%更安全

真正卡住人的，从来不是“怎么拉高”，而是“谁该负责提供高度基准”。.row不设min-height，.col加一百个h-100也没用；.sidenav用了fixed却没给.main留出空间，再细的对齐也会崩。先盯住高度源头，再动样式。