container-fluid需分层控制，主内容区使用并加内边距，内部组件用栅格或flex布局；fixed-top需配合sticky-top或手动设margin；侧边栏折叠须同步隐藏文字、重置line-height等样式。
container-fluid 是主内容区的起点，不是万能解药
后台系统天然要占满视口宽度，但直接全用 container-fluid 会出问题：表格列宽算不准、侧边栏折叠后文字溢出、表单控件左右不对齐。真正该做的是分层控制——主容器撑满，内部组件按需约束。
- 主内容区（如
.main-content）用container-fluid，再加px-3或自定义padding控制呼吸感 - 卡片（
.card）、表格（.table）、表单组（.form-group）内部不套container，改用row+col-*栅格或纯 flex 布局 - 绝对禁止
container-fluid里嵌一层container，轻则水平滚动条，重则栅格偏移不可逆
fixed-top 导航栏遮挡内容？别靠 mt-5 猜高度
Bootstrap 的 fixed-top（v5）或 navbar-fixed-top（v4）会让导航脱离文档流，但不会自动推下后续内容。结果就是第一行卡片被切掉顶部，滚动时“钻出来”。
- v5 推荐改用
sticky-top+ 父容器overflow-y: visible，不用算高度，也不怕响应式断点变化 - v4 必须手动加
style="margin-top: 56px"到.main-content，mt-5这类工具类在 sm/md/lg 下值不同，一缩放就失效 - 若 navbar 高度自定义（比如加了双行 logo），必须同步更新 margin 或 CSS 变量（如
--bs-navbar-height），且确认 Bootstrap 版本支持该变量
col-md-2 缩成 col-md-1 后菜单文字消失？栅格只是宽度，不是折叠逻辑
Bootstrap 栅格系统本身不处理“折叠”，只负责分配宽度。从 16.66% 缩到 8.33%，.nav-link 的 padding、图标尺寸、font-size 全都没变，必然挤爆。
- 折叠状态必须配合隐藏文字：
.sidebar-mini .nav-link span { display: none; } - 图标要用
aria-label保留可访问性，不能只靠视觉 - 不要只改 class，漏掉配套 CSS 就等于没折叠——AdminLTE、CoreUI 的折叠效果都靠整套样式联动，不是单改栅格就能生效
侧边栏折叠后图标错位、文字换行、hover 区域变小，这些都不是栅格问题，是未同步更新内边距和行高。最常被忽略的是：折叠状态下的 line-height 和 min-height 必须重置，否则鼠标悬停位置和视觉焦点完全脱节。
