自举模态动态宽度答案

【问题标题】：Bootstrap Modal Dynamic Width自举模态动态宽度
【发布时间】：2015-12-16 08:57:57
【问题描述】：

我正在尝试定义一个引导模式，该模式可以获取有关其内容的动态宽度，并在必要时使用垂直滚动条。

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

模态：

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

inline-block 元素获得关于其内容的动态宽度。

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

注意：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;
}

【讨论】：

有没有办法以另一种方式定义水平对齐，然后使用文本对齐？我所有的对话框都已经写好了，它们不包含左对齐文本的信息，这将是很多工作来定义它。
是的，你可以添加 .modal-dialog .modal-content { text-align: left; } 将其还原为模态内容。
这对于 Bootstrap 4 来说是什么。你会怎么做 .modal.in{ text-align: center; } ？
@gaitat 我会使用 flexbox
这种方法使模态在隐藏时跳回左侧。看起来它只知道如何在左侧淡出，而不是在中间。 :(

【解决方案2】：

@tmg 的回答仅适用于 Bootstrap 3。对于 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;
}

【讨论】：

【解决方案3】：

fit-content 对我来说效果很好，没有像错位模态这样的不良副作用。

.modal {
    padding: 1%;
}
.modal-lg {
    min-width: auto;
    max-width: fit-content;
}

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

我只需要 modal-lg 和 modal-xl。这是我修复它的方法：

@media (min-width: 576px) {
  .modal-dialog.modal-xl{
    max-width: min( 90vw, 1200px ) !important;
  }
  .modal-dialog.modal-lg{
    max-width: min( 90vw, 900px ) !important;
  }
}

【讨论】：