自举对齐按钮底部的卡

我看了一下使用 card-deck和 card类(定价例子)的 Bootstrap 示例。我想知道如何修复按钮对齐，如果其中一个列表的项目比其他少。

Alignment issue

我希望所有的按钮垂直对齐(在每张卡的底部) ，但我不能找到一种方法来做到这一点。我尝试设置 .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.

有人知道吗？

编辑: 这里有一个类似问题的 Jsfiddle。

157662 次浏览
小开
最佳答案

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

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

小提琴

参考 这一页获得 Bootstrap 4的全部 Flexbox 修改类列表。

小开

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

Then give the button 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>

小开

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>

小开

一个类似的问题是 在这里回答。

只需将 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。这将使柔性盒对齐类工作。

另一个选择是使用 mt-auto(自动上边距)的按钮，这将推到底部的卡。

小开

向卡片添加页脚

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

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

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

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

小开

用包含 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>

小开

样品是(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>
小开

这个问题主要是由于卡片上的文字不均匀造成的，所以我在搜索了两个小时后找到的最佳答案就是在卡片上加上这一行，因为这一行的文字比其他的少:

<p class="invisible" > invisible</p>

我知道这不是解决问题的好方法，但这是我发现的最简单的方法。


提交答案