如何在引导卡标题旁边放置一个按钮？

Question

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

这就是我目前拥有的：

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

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

Answer 1

仅引导 4 个类

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

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

Answer 2

我会在外部容器（类卡）中使用 position: relative; 然后

button{
  position: absolute;
  top: 0;
  right: 0;
}

设置位置很重要：相对；到卡。否则绝对位置将相对于整个主体，而不是卡片元素。

类似这个 jsfiddle 的东西。 “card”类应该是外部容器，而“inner”类应该是按钮的类。

https://jsfiddle.net/4az3mgL0/3/

Answer 3

尝试将标题 AND 按钮包装在同一个 div 中（如果需要，也可以使用 h5）并将 float-right 添加到按钮：

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