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

Posted 2023-02-22

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

【英文标题】：Can I position a button at the bottom of a card without position: absolute;? (vue-bootstrap)

【发布时间】：2022-01-19 00:52:35

【问题描述】：

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

<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-
        >
            <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-
        >
            <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-
        >
            <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 类，但都没有工作。

【问题讨论】：

你能提供你的css吗？ hometbn、stretched-link 和 sCardHome 类的当前内容是什么？

css 在底部的样式标签中，但 stetched-link 是一个引导类

哦，对不起，我太笨了，不能滚动 xD

哈哈，不用担心

【参考方案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- 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>

【讨论】：

解决了！效果很好，谢谢！

【参考方案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;

【讨论】：

感谢您的帮助，我试过了，您的建议也有一些变化，但不幸的是它不起作用。没有什么可以按下按钮，它保持在顶部。是否需要为卡片和按钮设置静态高度？

抱歉，卡片高度是用于测试的。我删除了它。我测试了按钮高度。真的没必要。