所有按钮都应该在每张卡片的底部[重复]答案

【问题标题】：All buttons should be on the buttom of each card [duplicate]所有按钮都应该在每张卡片的底部[重复]
【发布时间】：2019-01-12 15:35:57
【问题描述】：

我想问如何制作每张卡片底部的按钮 Get LenoxBot 和 Dashboard，因为它们目前具有不同的高度。

我目前正在使用此代码：

<div class="card mt-3 serverscard" style="width: 25rem; margin-bottom: 20px;">
                        <figure style="margin: 20px 60px;">
                            {{#if lenoxbot}} {{#if icon}}
                            <a href="dashboard/{{id}}/overview">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="https://cdn.discordapp.com/icons/{{id}}/{{icon}}.jpg" height="120"
                                    width="50">
                            </a>
                            {{else}}
                            <a href="dashboard/{{id}}/overview">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="discordicon.png" height="120" width="120">
                            </a>
                            {{/if}} {{else}} {{#if icon}}
                            <a href="https://lenoxbot.com/invite">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="https://cdn.discordapp.com/icons/{{id}}/{{icon}}.jpg" height="120"
                                    width="120">
                            </a>
                            {{else}}
                            <a href="https://lenoxbot.com/invite">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="discordicon.png" height="120" width="120">
                            </a>
                            {{/if}} {{/if}}
                        </figure>
                        <div class="text card-body" style="margin: 0 20px;">
                            <h3 class="text h5 card-title" style="margin-top: 10px; margin-bottom: 10px; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{name}}</h3>
                            {{#if lenoxbot}}
                            <h6 class="text h6 card-text" style="margin-top: 10px; margin-bottom: 10px; color:rgb(28, 119, 0);">{{memberscount}} members</h6>
                            <a href="dashboard/{{id}}/overview">
                                <p class="btn btn-primary btn-lg" style="margin-top: 10px; margin-bottom: 10px;">Dashboard</p>
                            </a>
                            {{else}}
                            <h6 class="text h6" style="margin-top: 10px; margin-bottom: 10px; color:rgb(221, 56, 56);">Not using LenoxBot</h6>
                            <a href="https://lenoxbot.com/invite" target="blanc">
                                <p class="text text-white button btn btn-warning btn-lg" style="margin-top: 10px; margin-bottom: 10px;">Get LenoxBot!</p>
                            </a>
                            {{/if}}
                        </div>
                    </div>

谢谢！

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4

【解决方案1】：

为您的 .card 元素添加以下 css：

.card {
   display: flex;
   flex-direction: column;
}

对于您的按钮，将一个类添加到 <a> 元素并添加以下 css：

.card-button {
   margin-top: auto;
}

希望它对你有用..

【讨论】：