引导程序4-使锚与卡头中的方向元素对齐

Question

我正在使用Bootstrap 4+创建一个具有可折叠卡体的卡，该卡体是由卡头中的链接触发的。

<div class="card text-left mb-3 mt-3">
  <div class="card-head p-3">
    <h4>How do we get started?</h4>
    <a class="float-right" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
    More
    </a>
  </div>
<div class="collapse" id="collapse1">
  <div class="card card-body">
    <p>Content</p>
  </div>
</div>
</div>

显示“更多”的标签未与其旁边的标题元素垂直地垂直排列。

在Chrome中看起来像这样：

如何使标题和“更多”链接（垂直）彼此内联？从而减少了浪费的垂直高度。

Answer 1

只需将d-flex justify-content-between类添加到card-head类中即可解决您的问题。希望对您有帮助。谢谢

  

Bootstrap 4 Flexbox-Documentation

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card text-left mb-3 mt-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>How do we get started?</h4>
    <a class="float-right" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
    More
    </a>
  </div>
<div class="collapse" id="collapse1">
  <div class="card card-body">
    <p>Content</p>
  </div>
</div>
</div>

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 2

您可以在d-flex align-items-center中使用Bootstrap 4+中可用的card-head，也不需要使用float-right，而可以使用ml-auto。像这样

<div class="card text-left mb-3 mt-3">
  <div class="d-flex align-items-center card-head p-3">
    <h4>How do we get started?</h4>
    <a class="ml-auto" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
    More
    </a>
  </div>
<div class="collapse" id="collapse1">
  <div class="card card-body">
    <p>Content</p>
  </div>
</div>
</div>