如何使用 html bootstrap 对齐卡片中的按钮

Question

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

这种对齐方式有两个不同的问题：

1. 每张卡片中的“了解更多”按钮都紧跟在最后一个文本行之后，因此不在水平线上。

2. “Factsheet”-按钮按“了解更多”按钮的顺序排列为 <button> 元素，因此默认情况下不与其他元素在水平线上。

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

这是我实际 html 代码的 sn-p：

<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;
}

Answer 1

假设您使用的是.card-deck 或.card-group，您可以在每张卡片中使用div.card-footer 来按住按钮，而只需使用a.btn 作为按钮。

<div class="card-deck">
  ...
  <div class="card">
    <div class="card-body">
      ...
    </div>
    <div class="card-footer">
      <a href="text.html" class="btn btn-sm btn-secondary" style="padding: 1.25em;">Find out more</a>
      <a href="text.pdf" class="btn btn-sm btn-secondary" style="padding: 1.25em;" target="_blank">Factsheet</a>
    </div>
  </div>
  ...
</div>

见jsfiddle