模态宽度(增加)

Question

我希望模态为屏幕宽度的80%左右.modal-lg不够大.这个:

.modal .modal-dialog {
  width: 80%;
}

不适用于Bootstrap 4.

Answer 1

您可以modal-lg通过以下操作创建或仅覆盖默认引导程序:

.modal-lg {
    max-width: 80%;
}

如果不工作只是添加!important所以它看起来像下面

.modal-lg {
    max-width: 80% !important;
}

现在打电话给modal-lg.

<div class="modal-dialog modal-lg" role="document">
 <!-- some modal content --->
</div

Answer 2

Bootstrap 4包括调整实用程序.您可以将大小更改为页面宽度的25/50/75/100%(我希望有更多的增量).

要使用这些,我们将替换modal-lg该类.默认宽度和modal-lg使用css max-width来控制模态的宽度,所以首先添加mw-100类以有效禁用max-width.然后只需添加所需的宽度类,例如w-75.

Answer 3

对于回应答案.

@media (min-width: 992px) {
  .modal-dialog {
    max-width: 80%;
  }
}

Answer 4

在 Bootstrap 4 中，您必须使用 'max-width' 属性，然后它才能完美运行。

<div id="modal_dialog" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" style="max-width: 1350px!important;" role="document">
    <div class="modal-content">
        <div class="modal-body">
            Sample text
        </div>
    </div>
</div>