modal-dialog
div,请添加另一个类 modal-lg
:<div class="modal-dialog modal-lg">
如果您想让模态对话框居中,请使用以下方法:
.modal-ku {
width: 750px;
margin: auto;
}
最简单的方法可能是在 modal-dialog
div 上使用内联样式:
<div class="modal" id="myModal">
<div class="modal-dialog" style="width:1250px;">
<div class="modal-content">
...
</div>
</div>
</div>
modal-lg
和modal-xl
类之间进行选择,或者如果你想要自定义宽度,那么可以在内联CSS中设置max-width属性。例如,
<div class="modal-dialog modal-xl" role="document">
<div class="modal-dialog" style="max-width: 80%;" role="document">
在我的情况下,
modal-lg
类的宽度不够宽。因此解决方案是
@media (min-width: 1200px) {
.modal-xlg {
width: 90%;
}
}
使用上述类别,而不是 modal-lg
类别。
modal-xl
类。 - Pedro Lobito当我将模态框的宽度增加时,我也遇到了同样的问题,即模态框没有居中显示。 经过一番尝试,我找到了以下解决方案。
.modal-dialog {
max-width: 850px;
margin: 2rem auto;
}
如果这对你有用,请点赞。编码愉快!
在Bootstrap 3中,您需要更改modal-dialog。因此,在这种情况下,您可以在modal-dialog所在的位置添加类modal-admin。
@media (min-width: 768px) {
.modal-dialog {
width: 600;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}
}
modal-dialog
的默认宽度为600px
。但您可以明确地更改其宽度。例如,如果您想将它的宽度最大化到您选择的值,例如800px
,则可以按照以下步骤进行操作:.modal-dialog {
width: 800px;
margin: 30px auto;
}
注意:此更改适用于您在应用程序中使用的所有模态对话框。同时,我的建议是最好定义自己的CSS规则,而不要触及框架的核心。
如果您只想将其设置为特定的模态对话框,请使用自己的引人注目的类名作为modal-800
,其宽度设置为800px
,如下所示:
HTML
<div class="modal">
<div class="modal-dialog modal-800">
<div class="modal-content">
</div>
</div>
</div>
CSS
.modal-dialog.modal-800 {
width: 800px;
margin: 30px auto;
}
modal-700
,其宽度为 700px
。我有一个需要在模态框中显示的大网格,仅在body上应用宽度并不能正确工作,因为表格虽然具有bootstrap类,但仍会溢出。最终我在modal-body
和modal-content
上应用了相同的宽度:
<!--begin::Modal-->
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content" style="width:980px;">
<div class="modal-header">
<h5 class="modal-title" id="">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="la la-remove"></span>
</button>
</div>
<form class="m-form m-form--fit m-form--label-align-right">
<div class="modal-body" style="width:980px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<!--end::Modal-->
如果您想保持模态响应,请使用宽度的%而不是像素。您可以在行内(如下所示)或使用CSS进行操作。
<div class="modal fade" id="phpModal" role="dialog">
<div class="modal-dialog modal-lg" style="width:80%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">HERE YOU TITLE</h4>
</div>
<div class="modal-body helpModal phpModal">
HERE YOUR CONTENT
</div>
</div>
</div>
</div>
2021年9月:Bootstrap 5支持的尺寸
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
modal-xl
。请仔细检查是 Bootstrap 4 还是 5。 - CodeToLife