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

Question

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

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

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

Answer 1

您可以使用 flexbox 来完成这项工作。我不完全确定这是否适用于 stretched-link。但也许你可以试试。只需添加“display: flex;”到你的 sCardHome-Class。给 homebtn-class 一个静态高度，并将 margin general 设置为 auto ，将 margin-bottom 设置为一个静态值。这样 Button 将始终位于卡片底部并居中。

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

Answer 2

您可以通过使用 flexbox 轻松地做到这一点。

Bootstrap 提供了一些实用程序 classes。这包括将 display: flex 应用于元素的 display utilities，例如 d-flex。我们将通过 <b-card>.

上的 body-class 道具将这张卡应用到卡体上

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

还有其他方法可以使用 flex 定位元素，如果您想查看一些替代方法，可以查看 bootstrap 文档中的 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>

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

Can I position a button at the bottom of a card without position: absolute;? (vue-bootstrap)

javascript

html

css

vue.js

bootstrap-vue

示例：