我可以在没有位置的卡片底部放置一个按钮：absolute;？ (vue-bootstrap)

Question

所以我试图创建一个只有背景图像和按钮的简单卡片，按钮链接被拉伸到整个卡片上。虽然按钮看起来很糟糕，但不是在底部，但如果我使用绝对位置，它会删除拉伸的链接。

<template>
    <div>
        <h2>College Management Home</h2>

        <b-card
            class="sCardHome m-3"
            header="Courses"
            overlay
            img-src="https://picsum.photos/325/200/?image=26"
            img-alt="Card Image"
        >
            <b-button class="stretched-link homebtn" :to="{ name: 'viewCourses'}" variant="primary">View Courses</b-button>
        </b-card>

        <b-card
            class="sCardHome m-3"
            header="Lecturers"
            overlay
            img-src="https://picsum.photos/325/200/?image=27"
            img-alt="Card Image"
        >
            <b-button class="homebtn stretched-link" :to="{ name: 'viewLecturers'}" variant="primary">View Lecturers</b-button>
        </b-card>

        <b-card
            class="sCardHome m-3"
            header="Enrolments"
            overlay
            img-src="https://picsum.photos/325/200/?image=30"
            img-alt="Card Image"
        >
            <b-button class="homebtn stretched-link" :to="{ name: 'viewEnrolments'}" variant="primary">View Enrolments</b-button>
        </b-card>

    </div>
</template>

<script>
export default {
    name: 'home',
    components: {}
}
</script>

<style>
.sCardHome {
    width: 100%;
    max-width: 20rem;
    float:left;
    text-align: center;
}
.homebtn {
    /* position: absolute; */
    bottom: 15px;
}
</style>

附带说明一下，有没有一种简单的方法可以让卡片的边距拉伸以填充空间，所以一行中的第一张卡片与页面和导航栏标题左对齐，而最后一张卡片是与注销按钮右对齐，所以边距填充了中间的空间，所以它都适合（在这种情况下，中间图片的左右边距，虽然需要响应，但不能硬编码）？我在每张卡片和一个 div 容器上尝试了 mx-auto 类，但都没有工作。

Answer 1

使用 flexbox 可以很容易地做到这一点。

Bootstrap 提供了一些实用程序类。这包括 display utilities 之类的 d-flex，它将 display: flex 应用于元素。 我们将通过<b-card> 上的body-class 属性将此卡应用到卡体。

然后要获得按钮位置，我们可以使用自动边距。幸运的是，Bootstrap 为此提供了spacing utilities。所以在这里我们可以申请mt-auto (margin-top: auto) 将按钮推到底部。如果我们想让按钮水平居中，我们也应用mx-auto (margin-left: auto; margin-right: auto) 类。

还有其他使用 flex 定位元素的方法，如果您想查看一些替代方法，可以查看引导文档上的 flex utility 页面。

示例：

new Vue({
  el: "#app"
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-4">
  <b-card-group>
    <b-card v-for="i in 2" class="m-3" header="Courses" overlay img-src="https://picsum.photos/325/200/?image=26" img-alt="Card Image" header-class="text-center" body-class="d-flex">
      <b-button class="stretched-link mt-auto mx-auto" variant="primary">
        View Courses
      </b-button>
    </b-card>
  </b-card-group>
</div>

Answer 2

您可以使用 flexbox 来完成这项工作。我不完全确定这是否适用于拉伸链接。但也许你可以试试。只需添加“显示：弹性；”到您的 sCardHome-Class。给 homebtn-class 一个静态高度，一般将 margin 设置为 auto，margin-bottom 设置为静态值。这样，按钮将始终位于卡片底部并居中。

.sCardHome {
    width: 100%;
    max-width: 20rem;
    float:left;
    text-align: center;
    background-color: aqua;
    display: flex;
}
.homebtn {
    margin: auto;
    margin-bottom: 10px;
}