如何在Bootstrap 4中用CSS实现侧边栏固定布局？

直接用 position: fixed 是唯一可靠路径，因 sticky-top 和 position: sticky 在侧边栏场景下浏览器对水平粘性支持差，且 Bootstrap 4 的 .row 为 flex 容器，导致其失效；必须对侧边栏内部容器设 top: 0、left: 0、width: 250px、height: 100vh，并为主内容区配 margin-left: 250px。

直接用 position: fixed 是唯一可靠路径，sticky-top 和 position: sticky 在侧边栏场景下基本不可用——不是写法错，是浏览器对水平方向粘性定位支持差，且 Bootstrap 4 的栅格结构（.row 是 flex 容器）会让它们直接失效。

为什么 sticky-top 加在 .col-md-3 上没反应

因为 sticky-top 只响应 top 偏移，不处理 left；它依赖 position: sticky，而该属性在 flex 子项（即 .col）中触发条件苛刻：父容器不能有 overflow: hidden 或 transform，且必须设 left 值——但 iOS Safari 15.4 前根本不认 left: 0。

常见现象：.col-md-3 加了 sticky-top 后，侧边栏仍随页面滚动；强行加 left: 0 则整个元素消失或卡在左上角。

1. 别把 sticky-top 放在 .col 上，它只适用于顶部导航等文档流顶部元素
2. Bootstrap 4 的 .row 默认是 display: flex，不提供 sticky 锚定所需的定位上下文
3. 即使你用了 @supports (position: sticky)，iOS 真机测试大概率失败，模拟器会误判

用 position: fixed 必须手动补全的四要素

固定定位会让侧边栏脱离文档流，主内容区不会自动让位。漏掉任意一项，就会塌缩、遮挡、滚动失灵。

1. top: 0 或 top-0（若页面有 .navbar，需设为 top: 56px 避免重叠）
2. left: 0 或 start-0，锚定左侧起点
3. width: 250px（不能靠 col-md-3 继承，fixed 元素宽度归零）
4. height: 100vh（height: 100% 会塌陷，因父容器无高度约束）

同时，侧边栏内部容器必须加 overflow-y: auto 和 max-height: calc(100vh - 2rem)，否则长菜单无法滚动或溢出视口。

主内容区怎么避免被遮挡或穿透

position: fixed 不会通知右侧内容“我在这”，所以必须显式留白。

1. 主内容区加 margin-left: 250px（值必须严格等于侧边栏宽度），禁用 padding-left——它不阻止内容溢出，还干扰栅格计算
2. 不要用 ms-md-3 这类响应式工具类替代，它们数值不精确，小屏下易失效
3. 如果侧边栏宽度是百分比（如 width: 20%），右栏也要用相同比例的 margin-left: 20%
4. 右栏若要独立滚动，需设 min-height: 0 或 height: calc(100vh - 60px)，否则 overflow-y: auto 不生效

移动端和响应式断点最容易崩坏的地方

桌面端跑通不代表上线没问题。90% 的错位、遮挡、滚动卡死，都出在断点处理和层叠顺序上。

1. @media (max-width: 768px) 下，必须移除 position-fixed 和 margin-left，还原为普通 .col 流式布局——position: fixed 无视栅格规则，小屏下会永远显示且盖住内容
2. 检查 z-index：默认 .navbar 是 1030，若用了 offcanvas 是 1140，侧边栏至少设 z-index: 1150
3. 若页面含 offcanvas 或带 transform 的组件，它们会创建新层叠上下文，让 sticky 失效；此时 fixed 是唯一选择，但需同步处理冲突

真正容易被忽略的是：侧边栏内部容器（如 .sidebar-inner）才是 fixed 的目标，不是 .col 本身；一旦加在列上，宽度归零、位置错乱、右侧内容穿透，全是必然结果。