CSS Bootstrap 模态动态宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34307647/
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
Bootstrap Modal Dynamic Width
提问by njlqay
I am trying to define a bootstrap modal that gets a dynamic width regarding its content and if necessary a vertical scrollbar.
The vertical scrollbar works but the horizontal width seems to be a fixed width. Could you please help?
Modal:
我正在尝试定义一个引导模式，该模式获得有关其内容的动态宽度，并在必要时获得垂直滚动条。
垂直滚动条有效，但水平宽度似乎是固定宽度。能否请你帮忙？
模态：
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h4 class="modal-title">Dynamic Modal Title</h4></div>
<div class="modal-body">Dynamic Modal Body</div>
<div class="modal-footer">Dynamic Modal Footer</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
CSS:
CSS：
.modal .modal-body { /* Vertical scrollbar if necessary */
max-height: 480px;
overflow-y: auto;
}
body .modal-dialog { /* Width */
max-width: 100%;
}
回答by tmg
inline-blockelements get dynamic width regarding their content.
inline-block元素获得关于其内容的动态宽度。
body .modal-dialog { /* Width */
max-width: 100%;
width: auto !important;
display: inline-block;
}
Note: width: auto !important;is required to overwrite bootstrap css.
Finally to place it in middle of viewport you to display: flex;on the parent element
注意：width: auto !important;需要覆盖引导 css。最后将它放在视口的中间，你可以display: flex;在父元素上
.modal {
z-index: -1;
display: flex !important;
justify-content: center;
align-items: center;
}
.modal-open .modal {
z-index: 1050;
}
回答by Vael Victus
@tmg's answer will only work for Bootstrap 3. For Bootstrap 4, use this:
@tmg 的答案仅适用于 Bootstrap 3。对于 Bootstrap 4，请使用：
.modal {
text-align: center;
}
Alongside his suggestion:
除了他的建议：
.modal-dialog {
text-align: left; /* you'll likely want this */
max-width: 100%;
width: auto !important;
display: inline-block;
}
回答by Shantanu Mahakale
Works in Bootstrap 4-
适用于 Bootstrap 4-
Here I have added min width to 300px, max width to 90vw, modal can be scrolled vertically using screen scrollbar, and horizontal scrollbar shows up on modal if content width is > 90vw
在这里，我将最小宽度添加到 300px，最大宽度添加到 90vw，可以使用屏幕滚动条垂直滚动模态，如果内容宽度 > 90vw，则水平滚动条显示在模态上
.modal-dialog {
position: relative;
display: table;
overflow: auto;
width: auto;
min-width: 300px;
}
.modal-body { /* Restrict Modal width to 90% */
overflow-x: auto !important;
max-width: 90vw !important;
}
回答by Richard Ayotte
fit-contentworked well for me with no ill side effects like a misplaced modal.
fit-content对我来说效果很好，没有像错位的模态那样的不良副作用。
.modal {
padding: 1%;
}
.modal-lg {
min-width: auto;
max-width: fit-content;
}
