Bootstrap 4 Modal以自动宽度为中心答案

【问题标题】：Bootstrap 4 Modal centered with automatic widthBootstrap 4 Modal以自动宽度为中心
【发布时间】：2020-01-28 14:41:46
【问题描述】：

我想创建一个位于屏幕中心的 BootStrap 4 Modal。我知道使用“modal-dialog-centered”类可以做到这一点。问题是我还需要一个宽度可变的模态 - 一个将模态调整为内容的宽度。我正在努力解决这个问题。我已经尝试过容器流体方法、css 方法和其他方法。由于我不是所有这些工具的专家，因此我恳请您提出建议。

这是我目前的模式：

 <div class="modal fade" id="modal_{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="snapshotmodal" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">Snapshot:</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  </div>
                  <div class="modal-body">
                      <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-auto">
                              <h4>{{ alert.title }} </h4><br><br>
                              {{ alert.data|safe }}  
                            </div>
                        </div>  
                      </div>
                  </div>
                </div>
            </div>
         </div>

提前致谢。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

Bootstrap modal 实际上是一个flexbox 组件。所以你可以很容易地操纵它：

.modal {
  /* Styles to make the modal visible */
  display: flex !important;
  opacity: 1 !important;
}

.modal-dialog {
  justify-content: center !important;
}

.modal-content {
  width: initial !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="modal fade" id="modal_{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="snapshotmodal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myLargeModalLabel">Snapshot:</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-auto">
              <h4>{{ alert.title }} </h4><br><br>
              {{ alert.data|safe }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的回复。我已经实现了你的代码，但现在模式总是在屏幕上。它没有遵循预期的行为。换句话说，模态框应该在单击按钮后出现，但现在它永久显示在屏幕上。你知道这是怎么回事吗？再次感谢。
@JoaoSalles 这很正常，因为我使用了样式来让它出现。只需删除我对.modal 的所有样式；）
它像魅力一样为我的数据工作。但我不知道为什么字符串（我的代码中的 alert.title）仍然溢出模态。你知道这可能是什么吗？再次感谢！
@JoaoSalles 这很奇怪，因为即使标题很大，模式也会扩展。请参阅示例here。以目前的数据，我无法为您提供帮助。