我没有在模态中使用模态标题 我想在普通 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>```
--bs-modal-header-padding
变量在.modal
规则中定义。
因为您的
.modal-header
不在 .modal
内,所以它无法识别该变量。