bootstrap-3 Bir divanın altındaki bağlantıları ve düğmeleri hizala

Question

Aşağıdaki ekran görüntüsünde görüldüğü gibi, bağlantılar div'un dibinde hizalanır. Ben düzenlemek, düğmeleri hizalamak nasıl div altındaki, eklenti sepeti silin. Not tablosu kullanmıyorum. ekran görüntüsü aşağıda gösterilmiştir burada yapıştırılır sayfayı oluşturmaya şablondan

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

ilgili bitleri. Css class = "alttan işaretli"'un kullanılmasının hala bağlantıları hizalamadığını unutmayın. genişliğini eklediğimde bile: 300px;, css sınıfı .fixedheight için hala hizalamadılar.

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

ekran görüntüsü:

Answer 1

ben onu çözdüm. Yeni ekran görüntüsüne bakın. alt, alt köşe ve altbilim alt sınır işaretlerini ekleyerek bunu yaptım, böylece her bağlantının artık farklı bir css sınıfı var.

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

Bu şablon şimdi böyle görünüyor:

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

yeni ekran görüntüsü: