不能靠 col-* 类混用流式和固定宽度，因其底层 flex 逻辑与 width 冲突；应改用 d-flex + flex: 0 0 240px 和 flex: 1 实现真正固定与自适应布局，并配合媒体查询响应式控制。
不能靠 col-* 类混用流式和固定宽度——它们底层逻辑冲突，强行组合只会让布局在断点切换时突然错位或溢出。
为什么 col-md-3 + width: 200px 不起作用
Bootstrap 的 col-* 类本质是 flex-basis + 百分比计算，写死 width 会被 flex 布局覆盖（尤其当 flex-shrink: 1 默认开启时）。浏览器优先执行 flex 规则，width 只剩“建议值”。常见现象：侧边栏在大屏下看似固定，一缩到 md 断点就变窄、文字换行、甚至被压成一条线。
-
col-md-3在lg下约 250px，但到md就只剩 ~180px，根本不是固定 - 加
!important或min-width: 200px只能缓解，无法阻止 flex-shrink 在空间不足时压缩它 - 真正锁定宽度必须用
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px）
正确做法：用 d-flex 替代 row，显式控制伸缩行为
放弃栅格的百分比划分，改走纯 Flex 布局路线。父容器用 d-flex，子项脱离 col-* 约束，手动指定哪些该固定、哪些该自适应。
- 左侧固定栏：
flex: 0 0 240px+min-width: 240px（IE11 需额外加width: 240px） - 中间自适应栏：
flex: 1（即flex-grow: 1），不设flex-basis，让它吃掉所有剩余空间 - 右侧固定栏（如有）：
flex: 0 0 200px，同样加min-width - 必须确保父容器有明确宽度来源，比如
.container或width: 100%，否则flex: 1会塌陷
响应式回退必须手动写，不能依赖 Bootstrap 断点类
col-md-* 类的响应式是基于媒体查询自动切换 class，但 flex: 0 0 240px 是静态声明，不会随屏幕尺寸变化。小屏下若仍要固定宽度，需自己补媒体查询；若要收起侧边栏，则得切到 flex: 0 0 0 + overflow: hidden。
- 桌面端：
@media (min-width: 992px) { .sidebar { flex: 0 0 240px; } } - 移动端：
@media (max-width: 991.98px) { .sidebar { flex: 0 0 0; width: 0; overflow: hidden; } } - 别指望
ms-md-3这类工具类能精准腾出 240px 空间——它的数值是预设的（如ms-3= 1rem），不匹配实际侧边栏渲染宽度 - 主内容区的
margin-left必须和侧边栏真实宽度一致，且同样需要媒体查询同步切换
最易被忽略的是父容器高度约束：如果中间自适应栏要滚动，height: 100vh 不够，得用 min-height: 0 或 height: calc(100vh - 60px) 配合 overflow-y: auto，否则内容会撑开容器、滚动条不出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
