模态宽度（增加）答案

【问题标题】：Modal width (increase)模态宽度（增加）
【发布时间】：2017-08-11 07:56:30
【问题描述】：

我希望模态框占屏幕宽度的 80% 左右。 modal-lg 不够大。这个：

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

不适用于 Bootstrap 4。

【问题讨论】：

在 bootstrap 3 中，我只使用 modal-lg 和 modal-sm 类来拥有大小模式。您还可以在您的 css 中覆盖 .modal-lg。

标签： bootstrap-4 bootstrap-modal

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试使用像素

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

只需改变大小。

【讨论】：

【解决方案3】：

引导程序 3

您可以通过以下操作创建或覆盖默认引导程序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

对于 Bootstrap 4，请参阅@kitsu.eb 答案。另请注意，使用 bootstrap 4 实用程序可能会破坏响应能力。

【讨论】：

【解决方案4】：

在给出覆盖你的类的类的宽度后，只需使用 !important。

举例

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

希望这对你有用。

【讨论】：

它正在工作，但没有响应，对于 iPhone，它不工作

【解决方案5】：

如果你使用 Sass，

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

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

【讨论】：

【解决方案6】：

响应式答案。

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

【讨论】：

这是正确答案，kitsu.eb 的答案打破了 xs 尺寸的模态，感谢@Joel

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

Bootstrap 4 包括 sizing utilities。您可以将大小更改为页面宽度的 25/50/75/100%（我希望有更多的增量）。

要使用这些，我们将替换 modal-lg 类。默认宽度和modal-lg都使用cssmax-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>

【讨论】：

这才是真正的答案。
但是这是响应式的吗？我更改了模态窗口，但对于移动窗口，它保留了类。我认为模态lg不会这样做
@AlanPallath 任何宽度类的使用都可能破坏响应能力。有一个关于响应宽度类的提案（例如w-lg-100），但引导维护者不想添加它们。
是的，我是这么认为的。因此，@media (min-width: 992px) 帮助我解决了这个问题，而不是这个问题。还是谢谢。
这在小 (xs) 屏幕上失败

【解决方案10】：

The following solution will work for Bootstrap 4.

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

所以我也在同一个问题上苦苦挣扎。解决问题的快速和最简单的方法是添加

modal-lg 在您的模态 Div 上

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

【讨论】：

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

您可以使用绝对单位和相对单位的组合

.modal-dialog-xw {
  margin-left: auto;
  margin-right: auto;
  min-width: 330px;    /* To prevent shrinking of very small screens (Galaxy S9 for example) */
  max-width: 75%;      /* To use 75% of the width available. Or set in pixels if need. */
}

在 .modal-dialog 之后添加 html 代码

<div class="modal-dialog modal-dialog-xw" role="document">...</div>

【讨论】：