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

Posted 2023-03-28

【中文标题】如何使用 html bootstrap 对齐卡片中的按钮

【英文标题】：How to align buttons in a card using html boostrap

【发布时间】：2021-01-23 10:00:18

【问题描述】：

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

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

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

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

【参考方案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

【讨论】：

非常感谢，您的解决方案适用于对齐内容，但不适用于其功能。因为在您的解决方案中，如果我单击它们，两个按钮都会做同样的事情。 :-(

你有事件监听器吗？它们是具有不同 href 值的两个不同链接，如果发生这种情况，那是由于您未共享某些内容。您的问题只是询问对齐方式。

您好，没有事件监听器。我通过使用 将其更改为白色