代码之家 › 专栏 › 技术社区 › Gilles Heinesch buninadev

所有按钮都应该在每张卡片的按钮上[副本]

bootstrap-4 twitter-bootstrap html

Gilles Heinesch buninadev · 技术社区 · 7 年前

我想问我怎么做纽扣 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>

谢谢您!

1 回复 | 直到 7 年前

Shuvo 7 年前

为您的 .card 元素:

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

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

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

希望对你有用。。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前