Html 如何增加 Bootstrap 模态宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34014891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase Bootstrap Modal Width?
提问by Damara Jati P
i've tried this but gone wrong
我试过这个但出错了
here's the css
这是css
body .modal-ku {
width: 750px;
}
and here's the failed result
这是失败的结果
回答by Praveen Kumar Purushothaman
In your code, for the modal-dialogdiv, add another class, modal-lg:
在您的代码中，对于modal-dialogdiv，添加另一个类modal-lg：
<div class="modal-dialog modal-lg">
Or if you wanna centre your modal dialog, use:
或者，如果您想将模态对话框居中，请使用：
.modal-ku {
width: 750px;
margin: auto;
}
回答by Mudasir Younas
The easiest way can be inline style on modal-dialogdiv :
最简单的方法可以是modal-dialogdiv上的内联样式：
<div class="modal" id="myModal">
<div class="modal-dialog" style="width:1250px;">
<div class="modal-content">
...
</div>
</div>
</div>
回答by Hakan F?st?k
In my case,
就我而言，
- Giving a static width to the modal hurts the responsiveness.
- The
modal-lgclass was not wide enough.
- 为模态提供静态宽度会损害响应能力。
- 该
modal-lg班是不够宽。
so the solution was
所以解决方案是
@media (min-width: 1200px) {
.modal-xlg {
width: 90%;
}
}
and use the previous class instead of modal-lgclass
并使用上一个类而不是modal-lg类
回答by huageorg
In Bootstrap 3 you need to change the modal-dialog. So, in this case, you can add the class modal-admin in the place where modal-dialog stands.
在 Bootstrap 3 中，您需要更改模态对话框。因此，在这种情况下，您可以在 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;
}
}
回答by Wolverine
In Bootstrap, the default width of modal-dialogis 600px. But you can explicitly change its width. For instance, if you would like to maximize its width to the value of your choice, 800pxfor instance, you do as following:
在 Bootstrap 中，默认宽度modal-dialog为600px。但是您可以明确更改其宽度。例如，如果您想将其宽度最大化为您选择的值，800px例如，您可以执行以下操作：
.modal-dialog {
width: 800px;
margin: 30px auto;
}
Note: This change sets to all modal dialog you use in your application. Also, my suggestion is it is best to have your own CSS rules defined and not to touch the core of the framework.
注意：此更改设置为您在应用程序中使用的所有模式对话框。另外，我的建议是最好定义自己的 CSS 规则，不要触及框架的核心。
If you only want it to be set for specific modal dialog, use your own catchy class name as modal-800whose width is set to 800px, as following:
如果您只想为特定的模态对话框设置它，请使用您自己的吸引人的类名，因为modal-800其宽度设置为800px，如下所示：
HTML
HTML
<div class="modal">
<div class="modal-dialog modal-800">
<div class="modal-content">
</div>
</div>
</div>
CSS
CSS
.modal-dialog.modal-800 {
width: 800px;
margin: 30px auto;
}
Likewise, you can have class name as based on the width size like modal-700whose width is 700px.
同样，您可以根据宽度大小使用类名，例如modal-700宽度为700px.
Hope it's helpful!
希望它有帮助！
回答by Ehsan Sajjad
I had a large grid that needed to be displayed in the modal and just applying the width on body was not working correctly as table was overflowing though it had bootstrap classes on it. I ended up applying same width on modal-bodyand modal-content:
我有一个需要在模态中显示的大网格，并且仅在主体上应用宽度无法正常工作，因为尽管表格上有引导程序类，但表格已溢出。我最终在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-->
回答by sumod badchhape
You can choose between modal-lgand modal-xlclasses or if you want custom width then, set max-width property with inline css. For example,
您可以在modal-lg和modal-xl类之间进行选择，或者如果您想要自定义宽度，请使用内联 css 设置 max-width 属性。例如，
<div class="modal-dialog modal-xl" role="document">
or
或者
<div class="modal-dialog" style="max-width: 80%;" role="document">
回答by bharathiraja
I have also faced same issue when increasing the width of the modal, window is not displaying in center. After work around I found the below solution.
在增加模态的宽度时，我也遇到了同样的问题，窗口没有显示在中心。解决后，我找到了以下解决方案。
.modal-dialog {
max-width: 850px;
margin: 2rem auto;
}
回答by Henry
If you want to keep the modal responsive use % of width instead of pixels. You can do it in-line (see below) or with CSS.
如果您想保持模态响应，请使用宽度的百分比而不是像素。您可以在线（见下文）或使用 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>
If you use CSS, you can even do different % for modal-sm and modal-lg.
如果你使用 CSS，你甚至可以为 modal-sm 和 modal-lg 做不同的 %。
回答by Muddasir23
Actually, you are applying CSS on modal div.
实际上，您是在模态 div 上应用 CSS。
you have to apply CSS on .modal-dialog
你必须在 .modal-dialog 上应用 CSS
For example, see the following code.
例如，请参阅以下代码。
<div class="modal" id="myModal">
<div class="modal-dialog" style="width:xxxpx;"> <!-- Set width of div which you want -->
<div class="modal-content">
Lorem Ipsum some text...content
</div>
</div>
</div>
Bootstrap also provides classes for setting div width.
Bootstrap 还提供了用于设置 div 宽度的类。
For small modal use modal-sm
用于小型模态使用 modal-sm
And for large modal modal-lg
对于大型模态 modal-lg
