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

Question

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

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

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

2. “Factsheet”按钮按“查找更多”按钮的顺序是一个<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;
}

Answer 1

假设您使用.card-deckor .card-group，您可以div.card-footer在每张卡片中使用 a 来按住按钮并仅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