右侧用 width: calc(100vw - 250px) 并配合 margin-left: 250px 和 box-sizing: border-box 实现自适应，因 100vw 基于视口宽度更可靠，避免父容器影响；需配合媒体查询在小屏下覆盖为 width: 100vw; margin-left: 0，并显式处理 fixed 元素的避让。
左侧固定宽度时，右侧如何用 calc() 做自适应？
直接给右侧容器设 width: calc(100% - 250px) 是最简方案，但前提是左侧用 position: fixed 或脱离文档流，否则会重叠或撑出横向滚动条。Bootstrap 默认的栅格系统（如 col- 类）不适用于这种固定+自适应组合，得手动写 CSS。
- 左侧用
position: fixed; width: 250px;，同时加top: 0; left: 0; height: 100vh; - 右侧不能依赖
.container或.row的默认行为，需单独设margin-left: 250px;或用calc()控制宽度 - 若右侧还要响应式（比如小屏隐藏左侧），
calc()的值就得配合媒体查询动态改，不能写死
为什么 calc(100vw - 250px) 比 calc(100% - 250px) 更可靠？
100% 是相对于父容器宽度计算的，而固定定位的左侧栏通常会让父容器“看不见”它占的空间，导致右侧的 100% 仍按全屏算，减完后反而窄了；100vw 是视口宽度，不受父级影响，更可控。
- 典型错误：
width: calc(100% - 250px);放在.main-content上，但它的父级是.container（本身有 padding 或 max-width），结果右侧宽度错乱 - 推荐写法：
width: calc(100vw - 250px); margin-left: 250px;，再配合box-sizing: border-box; - 注意：IE9+ 支持
calc()，但 IE 不支持vw单位（IE9–11 支持vw，但旧版兼容性差，线上项目需测）
和 Bootstrap 的 navbar、offcanvas 冲突怎么办？
Bootstrap 5 的 offcanvas 默认也用 position: fixed，如果左侧栏和 offcanvas 都 fixed，z-index 和 transform 可能打架，导致遮挡或动画异常。
- 确保左侧固定栏的
z-index高于.offcanvas（默认是 1100），比如设成z-index: 1150; - 如果左侧栏用了
transform: translateX(...)做收起动画，会触发新层叠上下文，可能让下拉菜单（.dropdown-menu）被裁剪——此时要给 dropdown 父级加overflow: visible; - 避免对
body直接设padding-left，否则和 Bootstrap 的 modal、toast 等组件的 body class 冲突
移动端适配时，calc() 容易被忽略的关键点
小屏下左侧栏通常收起，但 calc(100vw - 250px) 还在生效，会导致右侧内容被切掉一部分——这不是 calc() 的问题，而是没及时切换样式。
- 必须用媒体查询覆盖：
@media (max-width: 768px) { .main-content { width: 100vw; margin-left: 0; } } - 不要只靠 JS 切换 class，CSS 媒体查询更稳定（尤其页面刚加载时 JS 还没执行）
- 如果用 Bootstrap 的
display-{breakpoint}-*类控制显隐，记得右侧也要同步加对应类，比如d-none d-lg-block，否则 DOM 还在，只是不可见，calc()仍参与布局
实际开发中，最常卡住的地方不是写不对 calc()，而是忘了 fixed 元素脱离文档流后，其他元素需要主动避开它——这个“避开”动作（margin / width / transform）必须显式声明，Bootstrap 不会替你做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
