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

引导程序4包含sizing utilities。您可以将大小更改为页面宽度的25/50/75/100％（我希望有更多的增量）。

要使用它们，我们将替换modal-lg类。默认宽度和modal-lg都使用css max-width来控制模态的宽度，因此首先添加mw-100类以有效地禁用max-width。然后只需添加所需的宽度类，例如w-75。

请注意，您应该将mw-100和w-75类放在modal-dialog类的div中，而不是modal div的

<div class='modal-dialog mw-100 w-75'>
    ...
</div>

Answer 3

为了回应答案。

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

Answer 4

在Bootstrap 4中，您必须使用＆＃39; max-width＆＃39;属性然后它完美地运作。

<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>

Answer 5

在给予覆盖你的班级的班级宽度后，简单地使用！important。

例如

.modal .modal-dialog {
  width: 850px !important;
}

希望这对你有用。

Answer 6

这是对我有用的解决方案：

.modal{
 padding: 0 !important;
}
.modal-dialog {
  max-width: 80% !important;
  height: 100%;
  padding: 0;
  margin: 0;
}

.modal-content {
  border-radius: 0 !important;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" class="menu-toggler" data-toggle="modal" data-target=".bd-example-modal-lg">Menu</a>

<div class="modal mobile-nav-modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <a href="#" class="" data-dismiss="modal">Close Menu</a>

      <nav class="modal-nav">
        <ul>
          <li><a data-toggle="collapse" href="#collapseExample" role="button">Shop</a>
            <div class="collapse" id="collapseExample">
              <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
              </ul>
              <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Made To Order</a></li>
          <li><a href="#">Heritage</a></li>
          <li><a href="#">Style & Fit</a></li>
          <li><a href="#">Sign In</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Answer 7

The following solution will work for Bootstrap 4.

.modal .modal-dialog {
  max-width: 850px;
}

Answer 8

确保您的模态没有放在容器中，如果它没有改变原始宽度，请尝试添加！important注释。

Answer 9

尝试使用px

TRY THIS DEMO, ALERT ON LOST FOCUS, WHEN LOST FOCUS TRIGGER OR CALL ANY ACTION

只需更改尺寸。

Answer 10

如果您使用Sass，

根据documentation，您可以自定义默认值。

在您的情况下，您可以轻松覆盖$modal-lg文件中名为_custom.scss的变量。

Answer 11

尝试一下，这是对我有用的解决方案：

<div class="modal-dialog" style="min-width: 1500px" role="document">

Answer 12

因此，我也在同一问题上苦苦挣扎。解决问题的最快捷方法是只需添加

modal-lg在您的模式Div上

示例<div class="modal-dialog modal-lg">

Answer 13

将 max-width:80%; 设置为内联样式表

<div class="modal-dialog modal-lg" role="document" style="max-width: 80%;">

模态宽度（增加）

13 个答案: