引导模态动态宽度 [英] Bootstrap Modal Dynamic Width

问题描述

我正在尝试定义一个引导程序模版，该模版具有关于其内容以及必要时垂直滚动条的动态宽度.

垂直滚动条有效，但水平宽度似乎是固定宽度.你能帮忙吗?

方式:

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:

.modal .modal-body { /* Vertical scrollbar if necessary */
    max-height: 480px;
    overflow-y: auto;
}

body .modal-dialog { /* Width */
    max-width: 100%;
}

推荐答案

inline-block 元素的内容具有动态宽度.

inline-block elements get dynamic width regarding their content.

body .modal-dialog { /* Width */
    max-width: 100%;
    width: auto !important;
    display: inline-block;
}

注意: width:auto！important; 是覆盖引导CSS所必需的.最后，将其放置在视口的中间，以便在父元素上显示 display:flex;

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

.modal {
  z-index: -1;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.modal-open .modal {
   z-index: 1050;
}

这篇关于引导模态动态宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！