Bootstrap 模态框动态宽度

Question

我正在尝试定义一个引导模态框，它可以根据其内容动态调整宽度，并在必要时添加垂直滚动条。

垂直滚动条有效，但水平宽度似乎是固定的。您能否帮忙解决？

模态框：

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

- njlqay

Answer 1

< p > inline-block 元素根据其内容获得动态宽度。

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

注意：width: auto !important;是必需的，以覆盖Bootstrap CSS。最后，为了将其放在视口中央，您需要在父元素上使用display:flex;。

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

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

- tmg

---

是的，您可以添加 .modal-dialog .modal-content { text-align: left; } 来将模态内容恢复为左对齐。 - tmg

这段代码是用于Bootstrap 4的。你可以这样实现.modal.in{ text-align: center; }。 - gaitat

@gaitat 我会使用弹性盒子布局。 - tmg

这种方法使模态框在隐藏时跳回到左侧。它似乎只知道如何在左侧淡出，而不是在中间。 :( - Jānis Elmeris

display: flex !important; 正在阻止点击事件。 - Enrique

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

- Vael Victus

Answer 3

fit-content 对我来说效果很好，没有出现诸如模态框错位等不良副作用。

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

- Richard Ayotte

Answer 4

这在Bootstrap 5中有效：

.modal-dialog {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

Fiddle

请注意，边距样式仅适用于iOS Safari，在测试的所有其他平台上，fit-content已足够。

- jamedeus

Answer 5

适用于Bootstrap 4-

我在这里加入了最小宽度为300像素，最大宽度为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;
}

- Shantanu Mahakale

Answer 6

我只需要 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;
  }
}

- chickens