Bootstrap模态动态宽度

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

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

注意:width: auto !important;需要覆盖bootstrap css.最后将它放在viewport的中间,你可以display: flex;在父元素上

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

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

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