CSS bootstrap-3 对齐 div 底部的链接和按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18232453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap-3 align links and buttons at the bottom of a div
提问by brg
As can be seen in the screenshot below, the links are not aligned at the bottom of the div. How do I align the buttons for edit, delete, add cartat the bottom of the div. Note I am not using a table.
从下面的屏幕截图中可以看出，链接未在div底部对齐。如何 在div底部对齐用于编辑、删除、添加购物车的按钮。注意我没有使用table。
.bottomaligned {position:absolute; bottom:0; margin-bottom:7px; margin:7px;}
.fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;}
The relevant bits from template rendering the page whose screenshot is shown below is pasted here. Note that using the css class="bottomaligned"is still not aligning the links. Even when I added width: 300px;to the css class .fixedheight, they didn't still align.
模板渲染页面的相关部分粘贴在此处，其屏幕截图如下所示。请注意，使用 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 -->
The screenshot:
截图：
回答by brg
I solved it. See the new screenshot. I did it by adding 3 different css classes: bottomaligned, bottomrightand bottomleft, so each link now has a different css class.
我解决了。请参阅新屏幕截图。我做到了通过添加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;}
This is how the template now looks:
这是模板现在的样子：
<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 -->
The new screenshot:
新截图：
