twitter-bootstrap - Bootstrapalign-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>