如何使用HTML Boostrap对齐卡片中的按钮

编程问答 2022-06-09

问题描述

我正在寻找一种解决方案，将所有按钮都放在一条水平线上。

enter image description here

此对齐方式存在两个不同的问题：

  1. 每张卡中的“查找更多”按钮紧接在最后一行文本之后，因此不在水平线上。

  2. “情况说明书”按钮的顺序为“查找更多”按钮的顺序，依次为<button>元素，因此默认情况下，它与其他元素不在水平线上。

我该如何解决我的问题？我在CSS文件中尝试了一些更改（例如margin-top: auto;），但这没有用。

以下是我实际的html代码的片段：

<div class="card-body" style="padding: 0">
      <p class="card-text">        
        <ul>
            <li>text</li>                
            <li>text</li>
        </ul>
        <span style="padding: 1.25em;"><a href="text.html" class="btn btn-sm btn-secondary stretched-link">Find out more</a> </span>
    <button>
            <span style="padding: 1.25em;"><a href="text.pdf" class="btn btn-sm btn-secondary stretched-link" target="_blank">Factsheet</a> </span>
    </button>
      </p>
    </div>

和相应的CSS：

.project_card_body {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.25rem;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

alignmentbootstrap-4buttonbuttoncardhtml