bootstrap的z-index不按预期生效，根本原因在于其sass变量预设值（如$zindex-dropdown: 1000、$zindex-modal: 1055）被硬编码，直接写死z-index: 9999或用!important覆盖会破坏层级体系，导致dropdown被modal-backdrop遮盖、toast沉底、侧边栏不可点击等问题。
Bootstrap 的 z-index 堆叠顺序为什么总不按预期生效
因为 Bootstrap 内置的 z-index 值是硬编码在 Sass 变量里的，不是动态计算的，一旦你手动加 z-index: 9999 或用 !important 覆盖，后续弹窗、下拉、Tooltip 就容易被遮住或反向穿透。
常见错误现象包括：dropdown 被 modal-backdrop 盖住、toast 消失在 navbar 下方、自定义侧边栏菜单展开后无法点击。
- 优先查
_variables.scss中的$zindex-dropdown、$zindex-sticky、$zindex-modal等变量值（v5.3 默认分别是 1000、1020、1055） - 不要直接写死
z-index: 999—— 改成基于变量的计算，比如z-index: calc(#{$zindex-modal} + 1) - 如果用了多个第三方组件（如 Flatpickr、Tippy.js），它们的
z-index可能和 Bootstrap 冲突，需统一收敛到同一套变量体系
Grid 布局嵌套时 class 冲突导致样式错乱
Bootstrap 的 .row 和 .col 依赖严格的父子关系与 padding/margin 抵消逻辑，一旦中间插入非 Bootstrap 容器（比如自定义 div 或 Vue/React 组件包裹层），网格就会塌陷或错位。
典型场景：在 .col-md-6 里直接塞一个 Vue 组件，该组件根节点是 <div class="card">...</div>，结果右侧列被挤到下一行。
- 检查是否意外多了一层未声明
class="row"的div—— Bootstrap 不会自动“跳过”它去寻找最近的.row - 避免在
.col内部再写.container或.container-fluid，这会导致内边距叠加、宽度超限 - 响应式断点不生效？确认是否漏写了
viewportmeta 标签：<meta name="viewport" content="width=device-width, initial-scale=1">
为什么越用 Bootstrap 越难改样式
不是 Bootstrap 本身难改，而是它的 class 名称（如 .bg-primary、.shadow-sm）高度耦合视觉表现，一旦业务需要「主色变蓝但按钮阴影不变」，你就得同时改 HTML 和 CSS，没法只动样式文件。
更麻烦的是，很多项目为了“快”，直接复制粘贴官网示例，导致大量重复 class 组合（比如 btn btn-primary btn-sm rounded-pill），后期想全局调按钮圆角，就得 grep 全代码库改十几处。
- 真要定制，必须用 Sass 源码重编译，而不是只引
bootstrap.min.css - 慎用 utility-first 类（如
mt-3、ps-2）做布局 —— 它们不可复用、不可语义化、上线后几乎无法审计 - 如果设计系统已存在，建议把 Bootstrap 当作“基础工具集”，仅用于表单控件、栅格、辅助类，其他 UI 全部用自定义组件封装
小项目里引入 Bootstrap 是不是反而拖慢首屏
是。v5.3 的 bootstrap.min.css（含所有组件）约 200KB，gzip 后仍有 ~30KB；若只用栅格和按钮，却加载全部 Tooltip、Toast、Offcanvas 的 CSS/JS，就是白占带宽和解析时间。
尤其在 LCP（最大内容绘制）关键路径上，CSS 阻塞渲染，JS 阻塞主线程 —— 用户看到白屏的时间可能比手写 20 行 CSS 还长。
- 用
bootstrap/scss按需导入，比如只@import "scss/functions"; @import "scss/variables"; @import "scss/mixins"; @import "scss/grid"; - JS 部分彻底放弃
bootstrap.bundle.min.js，改用模块化引入：import { Modal } from 'bootstrap' - CDN 加载时注意 SRI（Subresource Integrity）校验，否则遇到缓存污染或劫持，
data-bs-toggle="modal"会静默失效
bootstrap.js，那 data-bs-toggle="collapse" 就完全不工作，但控制台不会报错，只会“看起来没反应”。
