Bootstrap模态动态宽度

时间:2015-12-16 08:57:58

标签: css twitter-bootstrap

我正在尝试定义一个引导模式,它获取有关其内容的动态宽度,如果需要,还有一个垂直滚动条。

垂直滚动条工作但水平宽度似乎是固定宽度。你能帮忙吗?

模态:

<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%;
}

4 个答案:

答案 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;
}