Bootstrap 5 的 --bs-modal-header-padding 等 CSS 自定义变量仅在 .modal 作用域内定义，直接在非模态框容器中使用 .modal-header 类会导致变量未定义错误。需通过继承、重置或显式声明确保样式生效。
bootstrap 5 的 `--bs-modal-header-padding` 等 css 自定义变量仅在 `.modal` 作用域内定义，直接在非模态框容器中使用 `.modal-header` 类会导致变量未定义错误。需通过继承、重置或显式声明确保样式生效。
在 Bootstrap 5 中，.modal-header 类本身不自带默认 padding 或 border-bottom 样式，而是完全依赖 CSS 自定义变量（如 --bs-modal-header-padding 和 --bs-modal-header-border-bottom）进行渲染。这些变量并非全局声明，而是仅在 .modal 选择器的作用域内被定义：
.modal {
--bs-modal-zindex: 1055;
--bs-modal-padding: 1rem;
--bs-modal-margin: 0.5rem;
--bs-modal-color: var(--bs-body-color);
--bs-modal-bg: var(--bs-body-bg);
--bs-modal-border-width: var(--bs-border-width);
--bs-modal-border-color: var(--bs-border-color-translucent);
--bs-modal-border-radius: var(--bs-border-radius-lg);
--bs-modal-box-shadow: var(--bs-box-shadow-sm);
--bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
--bs-modal-header-padding: 1rem 1rem; /* ← 关键变量在此定义 */
--bs-modal-header-border-bottom: var(--bs-border-width) solid var(--bs-border-color);
--bs-modal-footer-gap: 0.5rem;
--bs-modal-footer-bg: transparent;
--bs-modal-opacity: 0.5;
}
因此，当你将 <div class="modal-header"> 直接置于 <code> 下（即脱离 .modal 容器），浏览器无法解析 var(--bs-modal-header-padding) —— 因为该变量在当前作用域中根本不存在，最终导致样式失效（如 padding 为 0、border-bottom 消失）。
✅ 正确解决方案有三种：
-
语义优先：仅在
.modal内使用.modal-header
Bootstrap 的设计哲学是组件化与上下文绑定。若需复用头部样式，应包裹在.modal容器中（即使不触发弹窗行为）：<div class="modal d-block" tabindex="-1" style="display: block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">自定义标题</h5> </div> <div class="modal-body">内容区域</div> </div> </div> </div> -
提取并复用变量值（推荐用于轻量定制）
查阅 Bootstrap 5 源码 或 DevTools，获取变量默认值（如--bs-modal-header-padding: 1rem 1rem），然后手动应用：<div class="modal-header" style=" padding: 1rem; border-bottom: 1px solid rgba(0,0,0,.125); display: flex; justify-content: space-between; align-items: center; "> <h5 class="mb-0">独立使用的头部</h5> </div>
-
全局注入变量（慎用，避免污染）
若项目中大量需要“类模态头”样式，可在中添加全局 CSS 声明：<style> :root { --bs-modal-header-padding: 1rem; --bs-modal-header-border-bottom: 1px solid rgba(0,0,0,.125); } .modal-header { padding: var(--bs-modal-header-padding); border-bottom: var(--bs-modal-header-border-bottom); } </style>⚠️ 注意：此方式绕过了 Bootstrap 的响应式逻辑（如
--bs-modal-header-padding在不同断点下可能变化），且与未来版本升级存在兼容风险。
? 总结：Bootstrap 5 的 CSS 变量遵循严格的作用域隔离原则——.modal-header 不是独立样式类，而是上下文依赖型组件类。强行剥离其父级 .modal 容器，等于移除了它的样式根基。最佳实践是尊重框架设计意图：需要模态头视觉效果？请使用完整 .modal 结构；若仅为视觉复用，建议提取具体数值或封装为自定义工具类（如 .card-header-like），而非依赖未定义的 CSS 变量。
