Dashboard应主内容区用container-fluid、内部组件用container或栅格控制；navbar固定后需手动设margin-top或改用sticky-top；侧边栏折叠须配合隐藏文字与图标优化；offcanvas需禁用触摸关闭并同步URL状态。
用 container-fluid 还是 container？别硬套文档
后台 dashboard 天然需要撑满视口宽度，container 的固定最大宽度（如 1200px）在大屏上留白严重，反而破坏操作密度。但直接全用 container-fluid 也不行——侧边栏折叠、表格列宽计算、表单控件对齐都会因无边界约束而错乱。
实操建议：
- 主内容区（
.main-content）用container-fluid，配合px-3或自定义 padding 控制内边距 - 具体卡片（
.card）、表单（.form-group）、数据表格（.table）内部仍用container或不依赖 container 的栅格（如row+col-*）来保证元素尺寸可控 - 避免在
container-fluid里嵌套另一层container，会导致水平滚动条或意外缩进
navbar 固定顶部后，main 内容被遮挡怎么办？
Bootstrap 的 navbar-fixed-top（v4）或 fixed-top（v5）会让导航栏脱离文档流，但不会自动给后续内容加 margin-top。结果就是 Dashboard 的头部仪表盘卡片直接顶到 navbar 下面，第一行数据看不见。
常见错误现象：滚动时内容从 navbar 底部“钻出来”，像被切掉一截。
实操建议：
- v4 用户：给
main或.content-wrapper加style="margin-top: 56px"（默认 navbar 高度），不要依赖mt-5这类响应式间距工具类，它们在不同断点下值不一致 - v5 用户：改用
position-sticky+top: 0替代fixed-top，再配合sticky-top类，此时只需确保父容器有overflow-y: visible即可，无需手动算高度 - 如果用了自定义 navbar 高度（比如加了 logo 和多级菜单），必须同步更新 margin 或 top 值，CSS 变量（如
--bs-navbar-height）可复用但需确认版本支持
侧边栏折叠时，col-md-2 → col-md-1 为什么菜单文字全挤没了？
Bootstrap 栅格系统本身不处理“折叠”逻辑，col-md-2 缩成 col-md-1 后宽度只剩约 8.33%，但默认的 .nav-link 内边距、图标大小、文字行高都没变，必然溢出或换行错乱。
使用场景：AdminLTE、CoreUI 等基于 Bootstrap 的后台模板都自带折叠逻辑，但直接抄 class 很容易漏掉配套 CSS。
实操建议：
- 折叠状态不要只改栅格 class，必须配合隐藏文字：
.sidebar-mini .nav-link span设为display: none，同时用aria-label保无障碍访问 - 图标优先用
<i class="bi bi-grid"></i>（Bootstrap Icons）而非字体图标，后者在窄列中易被截断且无法通过 CSS 精确控制尺寸 - 避免给
.nav直接设width，应通过min-width+flex-shrink: 0控制折叠行为，否则在 flex 布局下会失效
v5.3+ 中 offcanvas 替代传统 sidebar？小心移动端手势冲突
新版 Bootstrap 推荐用 offcanvas 实现响应式侧边栏，尤其适合小屏设备。但它默认启用触摸拖拽关闭，和后台常见的表格左右滑动、图表缩放手势直接打架。
性能影响：每次打开 offcanvas 都会监听 touchstart，若页面含大量 ECharts 或 Map 组件，可能触发频繁重排。
实操建议：
- 禁用拖拽关闭：初始化时加
data-bs-touch="false"，或 JS 调用new bootstrap.Offcanvas(el, { touch: false }) - 移动端保留常驻 sidebar：用
showclass +@media (max-width: 991.98px)覆盖默认隐藏逻辑，避免用户反复点开闭合 - 不要把整个
offcanvas内容塞进router-view（Vue）或Outlet（React Router），会导致路由切换时 offcanvas 状态丢失；应在 layout 层统一控制显隐
复杂点在于：sidebar 折叠状态要和 URL 同步（比如刷新后保持展开），这得靠 localStorage + useEffect 或 mounted 钩子驱动，不是加个 class 就完事的。
