Bootstrap Modal header css 变量未定义 - var(--bs-modal-header-padding) 未定义

问题描述 投票:0回答:1

我没有在模态中使用模态标题 我想在普通 div 内使用 modal-header css 属性 但是 css 属性在其内部模态时具有值,但在普通 div 中使用时显示变量未定义 请帮助我知道我缺少什么

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js" integrity="sha512-X/YkDZyjTf4wyc2Vy16YGCPHwAY8rZJY+POgokZjQB2mhIRFJCckEGc6YyX9eNsPfn0PzThEuNs+uaomE5CO6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <div>
    <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>
</html>```
html css modal-dialog bootstrap-modal bootstrap-5
1个回答
0
投票

--bs-modal-header-padding
变量在
.modal
规则中定义。

因为您的

.modal-header
不在
.modal
内,所以它无法识别该变量。

© www.soinside.com 2019 - 2024. All rights reserved.