证明模态内的内容中心不起作用

Question

>我正在尝试在模态中使用justify-content-center，但对于某些人来说，它并没有像它应该的那样呈现。

我正在尝试在div中间渲染一个按钮

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <img class="card-img-top" src="{% static "images/manager_happy.png"%}" alt="Card image cap">
      <div class="modal-body">
        <h5>Improve your managerial skills by understanding who is in your team</h5>
        <hr>
        <div class="container">
          <div class="row">
            <div class="col">
                  <div class="price-modal-container">
                    <span class="modal-price-title">Price:</span><span class="modal-price">60$</span><span class="modal-Oprice">299$</span><span class="modal-discount">60% off</span>
                  </div>
                  <div class="time-price">
                    <i class="far fa-clock fa-spin"></i>Limited time offer discount
                  </div>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col">
              <a href="{% url 'website:payment' %}" class="btn btn-primary btn-lg btnsmallfont" role="button"><span class="glyphicon glyphicon-plus"></span>  Add Credit Now</a>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <a href="{% url 'website:payment' %}" class="btn btn-primary btn-lg btnsmallfont" role="button"><span class="glyphicon glyphicon-plus"></span>  Add Credit Now</a>
      </div>
    </div>
  </div>
</div>

任何想法它不起作用 ？ 因为模态有什么麻烦吗？

Answer 1

您是否正在尝试渲染它以使按钮水平居中？ 现在它不起作用，因为col类占用了所有剩余的宽度。 因此，您可以使列内的内容居中，也可以使列本身不占用整个宽度。

要将列内的内容居中，您只需将 text-center 类添加到列中，或者只需替换行上的justify-content-center即可。

<div class="row text-center">
   <div class="col">
      <a href="{% url 'website:payment' %}" class="btn btn-primary btn-lg btnsmallfont" role="button"><span class="glyphicon glyphicon-plus"></span>  Add Credit Now</a>
  </div>
</div>

或者，您可以保持行原样，并将列类从 col 更改为 col-auto，这样它就不会采用全宽。

<div class="row justify-content-center">
   <div class="col-auto">
      <a href="{% url 'website:payment' %}" class="btn btn-primary btn-lg btnsmallfont" role="button"><span class="glyphicon glyphicon-plus"></span>  Add Credit Now</a>
  </div>
</div>