Bootstrap - 对齐按钮到卡的底部

Question

我正在偷看使用card-deck和card类的一个Bootstrap示例(定价示例).我想知道如果其中一个列表的项目少于其他列表,那么如何修复按钮对齐.

我希望所有按钮都垂直对齐(在每张卡的底部),但我无法找到一种方法.我尝试设置.align-bottom类以及将按钮包装进去<div class="align-text-bottom">.我也从这个问题中尝试了几个关于添加空间的建议,但是仍然没有成功(间距也应该是可变的,以便它填满列表中的剩余空间).

包装<div class="card-footer bg-white">不会产生预期的结果,因为它没有对齐卡底部的按钮,并且在它周围创建了某种边框.

有没有人有想法？

编辑:这是一个类似于问题的jsfiddle.

Answer 1

根据jsfiddle链接的添加进行更新

您可以使用以下Bootstrap 4修饰符类:

1. 添加d-flex到.card-body
2. 添加flex-column到.card-body
3. 添加mt-auto到.btn嵌套中.card-body

更新小提琴

有关Bootstrap 4的flexbox修改类的完整列表,请参阅此页面.

Answer 2

向卡片添加页脚

您可以为每张卡片设置页脚，如下所示：

<div class="card-footer">
   <button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>

Answer 3

这里回答了类似的问题.

只需将align-self-end类添加到项目以在底部对齐.

https://www.codeply.com/go/Fiorqv1Iz6

     <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>20 users included</li>
              <li>10 GB of storage</li>
            </ul>
            <button type="button" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Get started</button>
     </div>

默认情况下,card显示:flex,但card-body不是.因此你需要添加d-flex flex-column到card-body.这将使flexbox对齐类工作.

Answer 4

将.card-bodydiv设置为display:flex和flex-direction:column。

然后给按钮margin-top:auto。

我想这里有 Bootstrap 帮助类。

.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>

    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

Answer 5

使用页脚，它已经为您设置好了一切。

<div class="card-deck">
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Title goes here</h4>
      <p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
   </div>
   <div class="card-footer text-muted mx-auto">
      <button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
   </div>
</div>

然后，您可以选择设置卡片页脚元素的样式。

.card-footer {
  background: transparent;
  border-top: 0px;
}

演示：https : //jsfiddle.net/rustynox/203zwyq6/

Answer 6

用包含mt-auto类的 div 标签包围卡片中的按钮

<div class="d-flex flex-row justify-content-center mt-auto">
<a href="#" target="_blank" target="_blank" type="button" class="btn btn-primary mr-3">GitHub</a>     
</div>