10

以下のスクリーンショットでわかるように、リンクはdivの下部に配置されていません。editdeleteadd cartのボタンをdiv の下部に配置するにはどうすればよいですか。テーブルを使用していないことに注意してください。

.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 -->

スクリーンショット:ここに画像の説明を入力

4

1 に答える 1