如何更改 Bootstrap 模态框的默认宽度
答案：为 .modal-dialog 元素设置宽度
默认情况下，Bootstrap modal 有四种不同的尺寸可用— 小、默认、大和超大。 但是，如果您仍想自定义模态窗口的大小，您可以覆盖 .modal-dialog 类的 CSS width 属性来调整默认模态窗口的大小。
同样，您可以覆盖 .modal-sm、.modal-lg 和 .modal-xl 类的 width 属性来分别调整小、大和超大模态对话框的大小。
以下示例将向您展示如何更改默认模式的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resizing the Bootstrap Modal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
@media screen and (min-width: 676px) {
.modal-dialog {
max-width: 600px; /* New width for default modal */
}
}
</style>
</head>
<body>
<div class="m-4">
<!-- 按钮 HTML (触发模态) -->
<a href="#defaultModal" class="btn btn-lg btn-primary" data-toggle="modal">Show Default Modal</a>
<!-- 默认模态 HTML -->
<div id="defaultModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default Modal</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>The default modal size has been changed to 600px. Now it is 100px wider than the previous 500px wide modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok, I Understand</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>正如您在上面的示例中看到的那样，模态类被放置在 CSS 媒体查询 中，因此模态 调整大小仅适用于视口具有一定宽度以容纳模态窗口的情况。 在为模态设置自定义宽度时，您必须记住它不应大于视口宽度，否则可能会出现水平滚动条。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements