Bootstrap - 将按钮与卡片底部对齐

Question

我正在查看使用 card-deck 和 card 类 (Pricing example) 的 Bootstrap 示例之一。我想知道如果其中一个列表的项目比其他列表少，如何解决按钮对齐问题。

我希望所有按钮都垂直对齐（在每张卡片的底部），但我想不出这样做的方法。我尝试设置.align-bottom 类以及将按钮包装在<div class="align-text-bottom"> 中。我还尝试了来自this question about adding space 的一些建议，但仍然没有成功（间距也应该是可变的，以便填满列表中的剩余空间）。

包裹在<div class="card-footer bg-white"> 中也没有产生预期的结果，因为它没有对齐卡片底部的按钮，并且在它周围创建了某种边框。

有人有想法吗？

编辑：这是一个类似于问题的jsfiddle。

Answer 1

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

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

fiddle

请参阅 this page 以获取 Bootstrap 4 的 flexbox 修改类的完整列表。

Answer 2

一个类似的问题是answered here。

只需将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 是 display:flex，但 card-body 不是。因此，您需要将d-flex flex-column 添加到card-body。这将使 flexbox 对齐类起作用。

另一种选择是在按钮上使用mt-auto（自动上边距），这会将其推到卡片的底部。

Answer 3

将.card-body div 设置为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 4

使用页脚，它已经为您设置好了所有内容。

<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 元素的样式。

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

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

Answer 5

为卡片添加页脚

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

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

Answer 6

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

类

<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> 

Answer 7

Flex 是你的朋友

这样的事情会起作用：

.flex-wrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
}

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #eee;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}


.flex-item {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}


.fill{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.btn{
  background:#069;
  padding:10px;
  color:#fff;
}

<div class="flex-wrap">

  <div class="flex-container">
    <div class="flex-item">FREE</div>
    <div class="flex-item fill">
      <h2>$0</h2>
      <p>Some text ... ashd iaush diuhasd uhasd aiusdh iaush d haisduhaiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">SIGN UP</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">PRO</div>
    <div class="flex-item fill">
      <h2>$10</h2>
      <p>Some text ... ashd iaush uhasd aiusdh iaush d haisduhdiuhasd aiusdh iuhasd aiusdh iaush d haisduhaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">GET STARTED</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">ENTERPRISE</div>
    <div class="flex-item fill">
      <h2>$20</h2>
      <p>Some text ... ashd iaush diuhasd aiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">CONTACT</a>
    </div>
  </div>
  
</div>

Answer 8

样本是（d-flex flex-column）

<div class="col-md-6 col-lg-6 col-sm-6 col-xl-4" style="float:right">

            <div class="bg-white d-flex flex-column" style="width:100%;height:530px;border:1px solid #808080;border-radius:10px;padding:15px;float:right;margin:10px;">
                <div class="card-body">
                    <h5 class="card-title" style="padding:0px 0px 20px 0px;text-align:center;border-bottom:1px dashed #000000">@item.SiteName</h5>
                    <button type="button" class="btn btn-primary" style="margin:10px;width:94%">آدرس سایت : @item.SiteUrl</button>
                    <button type="button" class="btn btn-secondary" style="margin:10px;width:94%">رتبه الکسا : @item.SiteAlexa</button>
                    <button type="button" class="btn btn-success" style="margin:10px;width:94%">اتوریتی : @item.MozAutoraty</button>
                    <button type="button" class="btn btn-danger" style="margin:10px;width:94%">لینک : @item.LinkToYou</button>
                    <button type="button" class="btn btn-warning" style="margin:10px;width:94%">اسپم اسکور : @item.SpamScore</button>
                    <button type="button" class="btn btn-info" style="margin:10px;width:94%">قیمت : @item.Price</button>
                </div>
                <a href="/Home/About/@item.SiteId" class="btn btn-primary btn-lg btn-block">توضیحات رسانه</a>
            </div>
        </div>