Bootstrap align-items-end 但没有列

Question

我需要将 div 内的元素对齐到末尾。正如我从 Bootstrap 的文档中了解到的，我应该使用 d-flex 和 align-items-end。当我应用它时，它会将元素粘在底部，但它也会将它们分成几列。我不想要那样。

我需要做什么来修复它？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-5">
    <div class="card">
      <div class="card-body text-left d-flex align-items-end">
        <a href="#" class="card-link">Link</a>
        <a href="#" class="card-link">Link</a>
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text goes here</p>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
      </div>
    </div>
  </div>
</div>

Answer 1

要将元素堆叠在一起，请使用flex-column, 并且要使列项目在底部对齐，您需要使用justify-content-end代替align-items-end。

注意，水平偏移是通过在不同的类集合引起a/ h5/p元素。

堆栈片段

.card {
  height: 300px;      /*  just for this demo, so one can see how it aligns 
 */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-5">
    <div class="card">
      <div class="card-body text-left d-flex flex-column justify-content-end">
        <a href="#" class="card-link">Link</a>
        <a href="#" class="card-link">Link</a>
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text goes here</p>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
      </div>
    </div>
  </div>
</div>