相关疑难解决方法(0)

从下面的屏幕截图中可以看出,链接未在div的底部对齐.如何对齐按钮编辑,删除,添加购物车 在底部DIV.注意我没有使用表格.

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

下面显示了模板的相关位,用于呈现屏幕截图如下所示的页面.请注意,使用css class ="bottomaligned"仍然没有对齐链接.即使我添加 宽度: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) %> …

我有4列的行,每列有一个标题和一些文本.大多数列具有相似数量的文本,并按下其列中的按钮以匹配其余列.但是,一列的文本较少,并且没有按下按钮足够远.

有没有办法将按钮对齐到行的底部？我想实现这一点并同时保持响应,所以当屏幕较小时它看起来像这样:

这是我刚才的页面标记:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>less text here</p>
      <p><a class="btn btn-default more" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
  </div>
</div>