应固定栅格列内的嵌套容器而非.col本身：用position: sticky（推荐）或position: fixed，配合top、width、height显式控制，并为右侧内容预留margin-left空间，避免破坏Bootstrap栅格流。
侧边栏固定在左侧但不破坏 Bootstrap 栅格流
Bootstrap 的 .col-* 类默认是浮动或 Flex 布局（v4/v5），直接对某个 .col 加 position: fixed 会脱离文档流，导致右侧主内容上移、宽度错乱。真正可行的做法是「用栅格划分区域，再在区域内做固定定位」。
关键思路：固定的是栅格容器内部的元素，不是栅格列本身。
- 把侧边栏放在
.col-md-3这类列里，但不要给该列设position: fixed - 在该列内嵌一个
<div class="sidebar-inner">，并对其应用 <code>position: sticky或position: fixed（需配合top和height控制） - 若用
position: fixed，必须手动设置width（如width: 250px），因为 fixed 元素默认 width 是 auto，且不继承父列宽度 - v5.3+ 推荐优先用
position: sticky，兼容性好（Chrome 56+/Firefox 59+/Safari 15.4+），且不脱离布局流
用 position: sticky 实现响应式侧边栏固定
sticky 是最轻量、最符合 Bootstrap 设计逻辑的方案——它在滚动到临界点前表现如 normal，之后才“粘住”，且仍参与父容器的栅格计算。
示例结构：
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="sidebar-inner position-sticky top-0 h-100 pt-3">
<h5>导航</h5>
<ul class="nav flex-column">...</ul>
</div>
</div>
<div class="col-md-9">
<p>主内容区</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
</div>
</div>
-
position-sticky是 Bootstrap 5 内置工具类，等价于position: -webkit-sticky; position: sticky -
top-0表示贴顶距离为 0，可按需换成top-3（对应 1rem）避开 navbar -
h-100确保内部高度撑满父列，否则 sticky 可能提前失效（sticky 的生效范围取决于其“包含块”的高度） - 在小屏幕（
md以下）时，.col-md-3会变成 100% 宽，此时 sticky 依然有效，但视觉上是“随内容滚动”，符合移动习惯
用 position: fixed 的硬核写法与坑
当需要侧边栏完全脱离视口滚动（比如始终悬浮在左上角，不随主内容区滚动条联动），才考虑 fixed。但它和 Bootstrap 栅格天然冲突，必须手动缝合。
- 必须显式设置
width，推荐用min-width: 250px配合width: 250px，避免响应式缩放失真 - 需用
left: 0+top: 0+height: 100vh占满视口，但此时主内容区要主动避让：margin-left: 250px或用ms-xx工具类 - 在
md断点以下，应通过媒体查询关闭 fixed：@media (max-width: 768px) { .sidebar-fixed { position: static; width: auto; } } - 如果页面有 sticky navbar，
top值不能写死0，得预留 navbar 高度（如top: 56px），否则被遮挡
为什么不用 offcanvas？什么时候该换思路
Bootstrap 5 原生的 offcanvas 是为移动端抽屉设计的，不是“固定侧边栏”的替代品。它默认隐藏、需 JS 触发展开，且展开后主内容会位移或变暗——这和“常驻+固定”的需求本质不同。
但如果你发现侧边栏在小屏下挤占太多空间、影响阅读，那就该放弃“固定”执念，改用响应式切换：
- 桌面端（
md+）：保留position-sticky侧边栏 - 移动端（
xs/sm）：用offcanvas包裹侧边栏，加个按钮控制显隐 - 关键是用
class="d-none d-md-block"控制桌面显示，class="d-md-none"控制移动端按钮显示
固定侧边栏的真正难点从来不在代码行数，而在于“滚动锚点判断”和“视口边界适配”——哪怕只差 1px 的 top 偏移，都可能让 sticky 失效，或者 fixed 被 header 盖住。动手前先用 DevTools 检查 computed position 和 containing block 高度。
