直接给.col-md-3加position: fixed会消失，因其脱离文档流后失去栅格约束，导致宽度归零、位置塌缩至视口左上角、右侧内容穿透显示；正确做法是固定内部容器（如.sidebar-inner），并配齐top-0、width、height:100vh及右侧margin-left。
为什么直接给 .col-md-3 加 position: fixed 会消失
不是代码写错了，是它脱离文档流后彻底失去栅格约束：宽度归零、位置塌缩到视口左上角、右侧内容直接从它底下穿过。Bootstrap 的 .col 是 .row 的 flex 子项，position: fixed 会让它无视父容器的任何布局规则。
必须把固定定位加在侧边栏**内部容器**上（比如 <div class="sidebar-inner">），而不是 <code>.col 本身；同时保留 .row 和 .container，否则响应式断点（如 md）会失效。
-
.row和.container必须保留——它们承载媒体查询逻辑 - 固定目标选
<nav class="sidebar-inner"></nav>，不是<div class="col-md-3"> <li>别在 <code>.row上套position: fixed：flex 容器会干扰尺寸计算 -
top: 0或top-0+start-0：锚定起始位置，否则默认偏移不可控 -
width: 250px（或w-25+min-width: 250px）：fixed 元素不继承列宽，必须显式设宽 -
height: 100vh（不是height: 100%）：百分比高度在 fixed 下会塌陷，100vh才撑满视口 - 右侧主内容区加
margin-left: 250px：fixed 不会自动避让，右栏必须主动腾出空间 - 右侧区域没设高度上限：只加
overflow-y: auto没用，必须配合min-height: 100vh或h-100（前提是父容器有明确高度） -
html和body缺少height: 100%：导致100vh在某些场景下计算异常 - 侧边栏内部没加
overflow-y: auto：长菜单会直接溢出视口，底部项点不到 - @media (max-width: 768px) { .sidebar-inner { position: static; } }
- 同时清除右侧的
margin-left，还原为普通流式布局 - 如果用了 Bootstrap 5 的
offcanvas，把侧边栏 DOM 移到offcanvas外层，避免 transform 创建新层叠上下文
position: fixed 必须配齐的四个参数
只写 position: fixed 不够，缺一不可：
漏掉 margin-left，右侧文字会直接被遮挡；用 padding-left 代替会导致栅格错位、内部元素溢出。
右侧内容滚动不生效？先查这三处
overflow-y: auto 加了却没滚动条，常见原因不是样式没生效，而是高度失控：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
注意：col-9 单独加 overflow-y: auto 无效——它的高度由内容撑开，没有上限，滚动永远不会触发。
移动端怎么安全收起侧边栏
别指望 col-sm-2 + position: fixed 自动适配小屏。固定定位在手机上会永远显示、挤占内容、误触频繁。
正确做法是在媒体查询中主动退出固定状态：
z-index 冲突很隐蔽：默认 navbar 是 1000，offcanvas 是 1140，侧边栏至少设 z-index: 1150 才能盖住，但别硬写 9999——第三方弹窗可能也用超大值。
