bootstrap-3 Ausrichtung Links und Schaltflächen an der Unterseite eines div

Question

Wie in der Screenshot unten gesehen werden, sind die Links nicht an der Unterseite der div ausgerichtet. Wie richte ich die Tasten für bearbeiten, löschen, Warenkorb am unteren Rand der div. Hinweis Ich verwende keine Tabelle.

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

Die relevanten Bits von Vorlage Vorlage Rendern der Seite, deren Screenshot unten gezeigt wird hier eingefügt. Beachten Sie, dass die Verwendung der CSS class = "bottomaligned" die Links immer noch nicht ausrichtet. Auch wenn ich Breite hinzugefügt: 300px; in die css-Klasse .fixedheight, sie nicht noch ausgerichtet.

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

Der Screenshot:

Answer 1

ich es gelöst. Siehe den neuen Screenshot. Ich habe es durch Hinzufügen von 3 verschiedenen CSS-Klassen: Bottom-Alignment, unten rechts und bottomleft, so dass jeder Link hat jetzt eine andere CSS-Klasse.

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

Dies ist, wie die Vorlage jetzt aussieht:

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

Der neue Screenshot: