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

Bootstrap - align button to the bottom of card

提问by a_guest

I was peeking at one of the Bootstrap examples that use the card-deckand cardclasses (Pricing example). I wondered how one can fix the button alignment if one of the lists has fewer items than the others.

我正在偷看使用card-deck和card类的 Bootstrap 示例之一（定价示例）。我想知道如果其中一个列表的项目少于其他列表，如何解决按钮对齐问题。

I would like all buttons to be vertically aligned (at the bottom of each card) but I couldn't figure out a way of doing this. I tried setting the .align-bottomclass as well as wrapping the button in <div class="align-text-bottom">. I also tried several suggestions from this question about adding spacehowever still no success (also the spacing should be variable such that it fills up the remaining space from the list).

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

Wrapping in <div class="card-footer bg-white">didn't yield the desired result either as it doesn't align the button at the bottom of the card and it creates some kind of border around it.

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

Does anyone have an idea?

有没有人有想法？

Edit:Here is a jsfiddlethat resembles the problem.

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

回答by sol

You can use the following Bootstrap 4 modifier classes:

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

1. Add d-flexto .card-body
2. Add flex-columnto .card-body
3. Add mt-autoto .btnnested in .card-body

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

fiddle

小提琴

Refer to this pagefor a full list of flexbox modifying classes for Bootstrap 4.

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

回答by Zim

A similar question has been answered here.

已在此处回答了类似的问题。

Just add the align-self-endclass to item to align at the bottom.

只需将align-self-end类添加到 item 以在底部对齐。

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

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

     <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title"> <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>

By default, the cardis display:flex, but the card-bodyis not. Because of this you need to add d-flex flex-columnto the card-body. This will make the flexbox alignment classes work.

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

Another option is to use mt-auto(auto top margin) on the button which will push it to the bottom of the Card.

另一种选择是mt-auto在按钮上使用(auto top margin) 将其推到卡片的底部。

回答by Paulie_D

Set the .card-bodydiv to display:flexand flex-direction:column.

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

Then give the button margin-top:auto.

然后给按钮margin-top:auto。

I imagine there are Bootstrap help classes for this.

我想这里有 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">
<div class="card-footer">
<button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>
 <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"> <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>

回答by Peter Palmer

You have to add:

你必须添加：

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

回答by RustyNox

Use the footer, it already has everything setup for you.

使用页脚，它已经为您准备好了一切。

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

Then you can optionally style the card-footer element.

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

.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;
}

demo: https://jsfiddle.net/rustynox/203zwyq6/

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

回答by DreamTeK

Flex is your friend

Flex 是您的朋友

Something like this will work the magic:

像这样的事情会产生魔力：

<div class="flex-wrap">

  <div class="flex-container">
    <div class="flex-item">FREE</div>
    <div class="flex-item fill">
      <h2>##代码##</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></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></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>

##代码##