我正在尝试定义一个引导模式,它获取有关其内容的动态宽度,如果需要,还有一个垂直滚动条。
垂直滚动条工作但水平宽度似乎是固定宽度。你能帮忙吗?
模态:
<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:
.modal .modal-body { /* Vertical scrollbar if necessary */
max-height: 480px;
overflow-y: auto;
}
body .modal-dialog { /* Width */
max-width: 100%;
}
答案 0 :(得分:14)
inline-block
个元素会获得有关其内容的动态宽度。
body .modal-dialog { /* Width */
max-width: 100%;
width: auto !important;
display: inline-block;
}
注意:覆盖bootstrap css需要width: auto !important;
。
最后,将它放在视口中间,在父元素
display: flex;
.modal{
display: flex !important;
}
答案 1 :(得分:4)
@tmg的答案仅适用于Bootstrap3。对于Bootstrap 4 ,请使用以下方法:
.modal {
text-align: center;
}
除了他的建议:
.modal-dialog {
text-align: left; /* you'll likely want this */
max-width: 100%;
width: auto !important;
display: inline-block;
}
答案 2 :(得分:2)
在Bootstrap 4-中工作
在这里,我将最小宽度添加到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;
}
答案 3 :(得分:0)
fit-content
对我来说效果很好,没有副作用,如模态错误。
.modal {
padding: 1%;
}
.modal-lg {
min-width: auto;
max-width: fit-content;
}