Css 自举模态动态宽度

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

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

模态：

---

内联块

元素获得关于其内容的动态宽度

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

注意：

宽度：自动！重要的是覆盖引导css所必需的。
最后，要将其放置在视口中间，您需要
display:flex

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

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

@tmg的答案只适用于Bootstrap 3对于引导4，请使用以下命令：

.modal {
    text-align: center;
}

除了他的建议之外：

.modal-dialog {
    text-align: left; /* you'll likely want this */
    max-width: 100%;
    width: auto !important;
    display: inline-block;
}

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

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

在bootstrap4中工作-

在这里，我将最小宽度添加到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;
}

是否有一种方法可以用另一种方式定义水平对齐，然后使用文本对齐？我的所有对话框都已编写，它们不包含左对齐文本的信息，这将需要大量的工作来定义。是的，您可以添加.modal dialog.modal content{text align:left；}以将其还原为模式内容。这对于引导4是什么。如何在{text align:center；}
中执行
.modal.？@gaitat我将使用FlexBox这种方法使模态在隐藏时跳回左侧。看起来它只知道如何在左边淡出，而不知道在中间淡出(
.modal {
    padding: 1%;
}
.modal-lg {
    min-width: auto;
    max-width: fit-content;
}

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