css - 如何在 Bootstrap 卡标题旁边放置一个按钮？

Question

我正在尝试创建将代表电子商务产品的 Bootstrap 卡。每张卡片都将是一个产品，我需要在卡片标题旁边放置一个“添加到购物车”按钮。

这就是我目前拥有的:

<div class="card">
  <div class="card-body">
    <h5 class="card-title"><%= "#{product.name.capitalize} %></h5>
    <%= button_to products_path(:pid => p.id), :class => 'btn btn-default' do %>
      Add to cart
    <% end %>
  </div>
  <p class="card-text">This is the product description.</p>
</div>

到目前为止，我已尝试将卡片标题向左浮动并向按钮右侧 float 。有点工作，但下面的描述奇怪地对齐。如果有的话，我希望有一个普通的响应式 Bootstrap 解决方案。

Answer 1

仅限 Bootstrap 4 类

或许您可以使用这种结构在此处插入您的按钮？基本上只是将标题与按钮一起放在另一个容器中，并使其成为一个 flexbox

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/200x120" alt="Card image cap">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h5 class="card-title mb-0">Card title</h5>
      <button type="button" class="btn btn-success">Primary</button>
    </div>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>