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

Posted 2023-03-05

【中文标题】所有按钮都应该在每张卡片的底部[重复]

【英文标题】：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" 
                                    >
                            </a>
                            else
                            <a href="dashboard/id/overview">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="discordicon.png"  >
                            </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" 
                                    >
                            </a>
                            else
                            <a href="https://lenoxbot.com/invite">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="discordicon.png"  >
                            </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>

谢谢！

【参考方案1】：

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

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

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

.card-button 
   margin-top: auto;

希望它对你有用..