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

另一种方法是这样做：

1. 将d-flex flex-column 类添加到card-body div。
2. 将mt-auto 类 (margin-top:auto) 添加到第一项。

现在这会将第一项和后面的所有内容推到底部。

使用这种方法可以更好地控制里面的元素。所以，如果明天你决定只有最后两个元素应该粘在底部，你可以将 mt-auto 类移动到倒数第二个元素。因此，它为您提供了一点更多的灵活性。

这是一个工作代码 sn-p（单击下面的“运行代码 sn-p”按钮进行检查）并注意我已添加 min-height: 333px; inline 以证明它可以工作：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-5">
            <div class="card">
                <div class="card-body text-left d-flex flex-column" style="min-height: 333px;">
                    <a href="#" class="card-link mt-auto">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>
</div>

Answer 2

要将元素堆叠在一起，请使用flex-column，而列项要在底部对齐，您需要使用justify-content-end而不是align-items-end。

注意，水平错位是由a/h5/p元素上设置的不同类引起的。

堆栈sn-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>