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>

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

1 个答案: