Css bootstrap-3对齐div底部的链接和按钮
如下面的屏幕截图所示,链接未在div的底部对齐。如何对齐div底部的编辑、删除、添加购物车按钮。注意:我没有使用表Css bootstrap-3对齐div底部的链接和按钮,css,twitter-bootstrap,twitter-bootstrap-3,bootstrap-sass,Css,Twitter Bootstrap,Twitter Bootstrap 3,Bootstrap Sass,如下面的屏幕截图所示,链接未在div的底部对齐。如何对齐div底部的编辑、删除、添加购物车按钮。注意:我没有使用表 .bottomaligned {position:absolute; bottom:0; margin-bottom:7px; margin:7px;} .fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;} 此处粘贴了呈现页面(其屏幕截图如下所示)的模板的相关位。请注意,使
.bottomaligned {position:absolute; bottom:0; margin-bottom:7px; margin:7px;}
.fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;}
此处粘贴了呈现页面(其屏幕截图如下所示)的模板的相关位。请注意,使用cssclass=“bottomaligned”仍然不会对齐链接。即使我添加了宽度:300px对于css类.FIXEDHEIGH,它们仍然没有对齐
<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类
.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 -->
新截图: