bootstrap-3 对齐 div 底部的链接和按钮答案

【问题标题】：bootstrap-3 align links and buttons at the bottom of a divbootstrap-3 对齐 div 底部的链接和按钮
【发布时间】：2013-08-14 13:00:37
【问题描述】：

从下面的屏幕截图中可以看出，链接在 div 的底部没有对齐。如何对齐 div 底部的 edit、delete、add cart 按钮。注意我没有使用 table。

.bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; margin:7px;}
.fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;}

从模板渲染页面的相关位（如下图所示）粘贴在这里。请注意，使用 css class="bottomaligned" 仍然没有对齐链接。即使我将 width: 300px; 添加到 css 类 .fixedheight 中，它们仍然没有对齐。

 <div class="row">

  <% @products.each do |product| %>


 <div class="col-lg-3 col-sm-4 col-6 fixedheight ">

    <div class="bottomaligned">
     <%= link_to 'edit', edit_product_path(product), class: "btn btn-danger"  %>

     <%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %>

     <%= button_to "Add to cart", order_items_path(product_id: product) %>

    </div>
    <hr>

  </div><!-- /.col-lg-3 -->

 <% end %>
</div><!-- /.row -->

截图：

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-sass

【解决方案1】：

我解决了。查看新的屏幕截图。我通过添加 3 个不同的 css 类来做到这一点：bottomaligned、bottomright 和 bottomleft，因此每个链接现在都有不同的 css 类。

  .bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; left: 0;}
  .bottomright {position:absolute; bottom:0;  margin-bottom:7px; margin:7px; right: 0;}
  .bottomleft {position:absolute; bottom:0;  margin-bottom:7px; left: 100px;}
  .fixedheight { height: 200px;  width: 243px;  position:relative; border:1px solid;}

这就是模板现在的样子：

  <div class="col-lg-3 col-sm-4 col-6 fixedheight ">

  <div>
    <div >
      <span class="bottomleft"><%= link_to 'edit', edit_product_path(product), class: "btn btn-danger"  %></span>

      <span class="bottomright"><%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %></span>

      <span class="bottomaligned"> <%= button_to "Add to cart", order_items_path(product_id: product) %></span>

     </div>
    <hr>
  </div><!-- /.col-lg-3 -->

新截图：

【讨论】：