更改Bootstrap模态框的默认宽度

Question

我正在尝试更改对话框的默认宽度，但无法生效。我已经尝试了这篇文章中提到的解决方案。以下是我的HTML代码:

<style>

#myDialog .modal-dialog{

width:80%;

}


</style>


<div id="myDialog" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
                <div class="modal-title" id="Dialog_title">Text Document</div>
            </div>
            <div class="modal-body">

                <div id="my_doc_content"></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="rg.closeDialog('myDialog');">Close</button>
            </div>
        </div>
    </div>
</div>

- John

---

添加 modal-lg 类不起作用或者对你来说太宽了吗？ - IndieRok

在我的情况下，添加<div class="modal-dialog modal-lg" role="document">没有产生任何变化。大小仍然是一样的。 - John

Answer 1

覆盖 .modal-dialog 的宽度

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

将这段代码放在 bootstrap.min.css 之后，以覆盖其默认宽度。

这是一个可工作的示例： fiddle链接。

- M.Tanzil

---

工作正常，但不具有响应性。 - Sapna Dorbi

Answer 2

这是一个可能有帮助的JSFiddle链接：工作JSFiddle。

当在类.modal上添加CSS样式而不是.modal-dialog时，你可以通过以下代码轻松更改模态框的宽度：

.modal{
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

$(function() {
  $("#myDialog").modal("show");
});

.modal-dialog {
  width: 80%;
  margin: auto;
}
.modal{
  width: 80%; /* respsonsive width */
  margin-left:-40%; /* width/2) */ 
}

<div id="myDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
        <div class="modal-title" id="Dialog_title">Text Document</div>
      </div>
      <div class="modal-body">

        <div id="my_doc_content"></div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="rg.closeDialog('myDialog');">Close</button>
      </div>
    </div>
  </div>
</div>

希望这能帮助到您！

- Steff Yang

---

https://jsfiddle.net/2n63gm6f/1/ 这个不是响应式的，而且这个答案对我也没有用。你能建议一些别的方法吗？ - Sapna Dorbi

Answer 3

我总是建议使用非构建文件，使用源文件可以从变量、混合和必要时添加/修改一些未明确公开的默认行为中获益...

因此，前往https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.3/scss/_modal.scss，您可以看到尺寸的定义并根据需要添加/编辑它们...

// example
@include media-breakpoint-up(lg) {
  .modal-extralg { max-width: $modal-lg * 2; }
}

- Hitmands

Answer 4

只需使用id：

#myDialog {
    width:80%;
}

- Ria

Answer 5

如果您使用Bootstrap 4+，则有默认的可选大小， 查看此处

您可以在不同的网格大小中创建modal-md、modal-lg

例如：

div class="modal-dialog modal-xl modal-dialog-centered" role="document"

- Ravi