Question

我有以下代码：

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

在以下用途之一中，此代码的结果如下：

我想将按钮放置在同一水平上（每张卡的右下方）。

我尝试通过相对于卡上的位置和按钮上的绝对位置来做到这一点，但这将它们定位在其当前位置，而不是卡的真实底部。告诉这些按钮所属位置的“灵活方式”是什么？

Answer 1

为.card-text尝试使用最小高度

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

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

在页脚中使用卡片组时，其内容将自动对齐。

将按钮放在Bootstrap4中卡组底部的位置

2 个答案: