bootstrap-3对齐div底部的链接和按钮 [英] bootstrap-3 align links and buttons at the bottom of a div
问题描述
如下面的屏幕截图所示,链接在 div 的底部未对齐。如何对齐 div 底部的编辑,删除,添加购物车的按钮。请注意,我没有使用表。
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 cart at the bottom of the div. Note I am not using a table.
.bottomaligned {position:absolute; bottom:0; margin-bottom:7px; margin:7px;}
.fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;}
模板渲染页面的相关位粘贴在此处,其屏幕截图如下所示。请注意,使用CSS class = bottomaligned 仍然无法对齐链接。即使我在CSS类 .fixedheight 中添加了 width:300px; ,它们仍然没有对齐。
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.
<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 -->
屏幕截图:
推荐答案
我解决了。查看新的屏幕截图。我通过添加3个不同的CSS类来做到这一点: bottomaligned , bottomright 和 bottomleft ,所以每个链接现在都有一个不同的CSS类。
I solved it. See the new screenshot. I did it by adding 3 different css classes: bottomaligned, bottomright and bottomleft, so each link now has a different css class.
.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 -->
新的屏幕截图:
这篇关于bootstrap-3对齐div底部的链接和按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!