7

Come si può vedere nello screenshot qui sotto, i collegamenti non sono allineati nella parte inferiore del div. Come posso allineare i pulsanti per modificare , eliminare, add carrello sul fondo del div. Nota Non sto utilizzando una tabella .bootstrap-3 allinea link e pulsanti nella parte inferiore di un div

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

I bit rilevanti dal modello di rendering della pagina la cui schermata è indicato di seguito viene incollato qui. Notare che l'utilizzo del css class = "bottomaligned" non sta ancora allineando i collegamenti. Anche quando ho aggiunto la larghezza : 300px; alla classe css .fixedheight, non erano ancora allineati.

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

La schermata: enter image description here

risposta

18

ho risolto. Guarda il nuovo screenshot. L'ho fatto aggiungendo 3 diverse classi css: con il valore minimo, bottomright e bottomleft, quindi ogni collegamento ora ha una classe css diversa.

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

Questo è come il modello sembra ora:

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

La nuova schermata:

enter image description here