Bootstrap4中卡片组底部的位置按钮答案

【问题标题】：Position buttons on bottom of card group in Bootstrap4Bootstrap4中卡片组底部的位置按钮
【发布时间】：2020-03-07 04:49:01
【问题描述】：

我有以下代码：

<h2 id="yachts" class="mt-0">Our Yachts</h2>
<div class="card-group">
    {{ $pages := sort (where $.Site.RegularPages "Section" "boats") "Weight" "asc" }}
    {{ range $pages }}
        <div class="card">
            <img src="{{ .RelPermalink | safeCSS }}{{ .Params.heroimage | safeCSS }}" class="card-img-top" alt="...">
            <div class="card-body clearfix">
                <h4 class="card-title">{{ .LinkTitle }}</h4>
                <p class="card-text border-light border-top border-bottom">
                    <span class="row">
                        <span class="col-6 text-muted text-left">
                            {{- partialCached "icons/users.svg" . -}}{{ .Params.pax }}
                        </span>
                        <span class="col-6 text-muted text-right">
                            {{- partialCached "icons/bed.svg" . -}}{{ .Params.bunks }}
                        </span>
                    </span>
                </p>                    
                <p class="card-text">{{ .Description }}</p>
                <a href="{{ .RelPermalink }}" class="card-link stretched-link btn btn-outline-dark float-right">Learn More</a>
            </div>
        </div>
    {{ end }}
</div>

（{{ 标签内的逻辑内容是 Hugo 模板标记（Golang），在这一点上无关紧要）。

此代码的结果在其中一种用途中如下所示：

我想将按钮放置在同一层（每张卡片的右下角）。

我尝试通过卡片上的相对位置和按钮上的绝对位置来执行此操作，但这会将它们定位在当前位置，而不是卡片的真正底部。告诉这些按钮它们属于哪里的“灵活方式”是什么？

【问题讨论】：

标签： css layout bootstrap-4 flexbox

【解决方案1】：

试试 .card-text 的最小高度

.card-text{
  min-height:250px;
}

【讨论】：

【解决方案2】：

事实证明，Bootstrap 提供的 card-footer 类正是我想要实现的。使用bg-light 或我们自己的样式类可以使它看起来正确。

<div class="card-footer bg-light">
    <a href="{{ $page.RelPermalink }}" class="card-link stretched-link btn btn-outline-dark btn-block">Learn More</a>
</div>

From the documentation：

使用带页脚的卡片组时，其内容会自动排列。

【讨论】：