Bootstrap modal-header类在普通div中CSS变量未定义求助

Bootstrap 5 中，modal-header、modal-body、modal-footer这类组件类的样式，依赖父级.modal元素中定义的CSS变量（比如--bs-modal-header-padding）。这些变量仅在.modal类的作用域内才会被初始化赋值，当你把这些类用在没有.modal父容器的普通div上时，浏览器找不到对应的变量定义，自然无法渲染出预期样式。

有两种简单的处理方式：

方式一：给父容器添加.modal和.d-block类 #

既然这些类本来就是为modal组件设计的，直接给外层容器加上.modal类，再用.d-block覆盖modal默认的隐藏样式，这样就能让子元素继承到所需的CSS变量：

<body>
    <div class="modal d-block">
        <div class="modal-header">Modal header to test with padding and border-bottom</div>
        <div class="modal-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sequi, rem iusto maxime est nostrum voluptatem tempore soluta aspernatur qui repellendus incidunt. Maiores similique aut ratione a facilis voluptatum error totam quibusdam quo, amet eum? Dicta incidunt sit dolorum atque id, eum eius, ea officia est voluptatem quod suscipit perferendis, tempore laborum consequatur ipsum. Ipsam, nemo!</div>
        <div class="modal-footer">
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-secondary">Secondary</button>
        </div>
    </div>
</body>

方式二：手动补充缺失的CSS变量或直接写固定样式 #

如果不想用.modal父容器，可以自己在全局或者目标元素上定义所需的CSS变量，或者直接给这些类写具体的样式值：

/* 方法1：定义缺失的变量 */
.modal-header, .modal-body, .modal-footer {
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-body-padding: 1rem;
    --bs-modal-footer-padding: 1rem;
    /* 其他需要的变量可从Bootstrap默认样式中提取对应值 */
}

/* 方法2：直接写固定样式替代变量 */
.modal-header {
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-body {
    padding: 1rem;
}
.modal-footer {
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

内容的提问来源于stack exchange，提问作者Anonymous