所有按钮应在每张卡的底部

Question

我想问一下如何在每张卡的底部设置按钮 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>

谢谢！

Answer 1

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

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

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

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

希望它会为您服务。