css - 如何在 Bootstrap 4 卡片边框上制作按钮？

Question

有没有办法使用 css 为将在卡片边框上的 Bootstrap 卡片制作一个按钮？如下图所示：

我正在浏览文档，但看不到可以直接使用 Bootstrap 4。也许可以在 css 中设置样式？

Answer 1

.card .btn {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

您可以通过将以下属性添加到按钮来获得它：

position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);