बूटस्ट्रैप -3 एक div

Question

के नीचे लिंक और बटन संरेखित करें जैसा कि नीचे स्क्रीनशॉट में देखा जा सकता है, लिंक div के नीचे गठबंधन नहीं हैं। मैं कैसे के लिए संपादित, बटन संरेखित करते div के तल पर, ऐड गाड़ी को हटा दें। नोट मैं तालिका का उपयोग नहीं कर रहा हूं।

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

उस पृष्ठ को प्रस्तुत करने वाले टेम्पलेट से प्रासंगिक बिट्स जिसका स्क्रीनशॉट नीचे दिखाया गया है, यहां चिपकाया गया है। ध्यान दें कि सीएसएस वर्ग = "नीचे हस्ताक्षर" का उपयोग कर लिंक को संरेखित नहीं किया जा रहा है। यहां तक ​​कि जब मैंने चौड़ाई जोड़ा: 300px; सीएसएस वर्ग पर। फ़िक्स्डहाइट, उन्होंने अभी भी संरेखित नहीं किया है।

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

स्क्रीनशॉट:

Answer 1

मैं इसे हल किया। नया स्क्रीनशॉट देखें। मैंने इसे 3 अलग-अलग सीएसएस कक्षाओं को जोड़कर किया: नीचे हस्ताक्षर, नीचे दाएं और नीचे बाएं, इसलिए प्रत्येक लिंक में अब एक अलग सीएसएस वर्ग है।

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

यह कैसे टेम्पलेट अब दिखता है:

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

नई स्क्रीनशॉट: