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

尝试将标题AND按钮包装在同一div中（如果需要，可以将其包装在h5中），然后在按钮上添加右浮点：

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

Answer 2

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

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

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

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

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

Answer 3

仅引导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>

如何在自举卡标题旁边放置一个按钮？

3 个答案: