自举中的输入组div，将其置于底部

Question

在Bootstrap网上商店页面上，即时将产品列为col-md-3div。这些div现在有相同的heightwidth jquery。

如何将input-group,div始终放在这些col-md-3 divs的底部？

我上传了一张图片，对此，你可以看到，我的问题是什么。如果产品名称长或短，或者只显示一个价格，则会出现产品编号输入和添加到购物车按钮，并且我希望它们总是位于底部。

<div class="col-md-3 main_item_div"> 
<a href="#" title="ASUS B85M-G 90MB0G50 alaplap" class="main_item_img_to_link"> 
    <img src="test.jpg" alt="ASUS B85M-G 90MB0G50 alaplap" class="img-responsive"> 
</a> 
<h2 class="main_item_title"> 
    <a href="#" title="ASUS B85M-G 90MB0G50 alaplap" class="main_item_title_to_link">Product name</a> 
</h2> 
<span class="main_item_cikkszam">Cikkszám: B85M-G 90MB0G50</span> 
<span class="main_item_kiszereles">Kiszerelés: Darab</span> 
<span class="main_item_kiszereles"><b>Készleten</b></span> 
<input type="hidden" value="1" id="MinimumOrder2"> 
<span class="main_item_price_2">19.090 Ft,-</span><span class="main_item_price_3">Akciós ár: 18.290 Ft,-</span> 

<div class="input-group"> 
    <input type="text" id="item_darabszam2" class="form-control item_darabszam" value="1"> 
    <span class="input-group-btn"> 
     <button onClick="add_to_cart(2);" class="btn btn-secondary item_add_to_cart" type="button"> 
      <i class="fa fa-shopping-cart" aria-hidden="true"></i> Kosárba 
     </button> 
    </span> 
</div> 

Click here for image

Answer 1

该解决方案将被给予相对位置的父元素（这里的“主项 - 格”），然后给底部：0像素和绝对位置的子元素（这里是“输入组”）。

无论父元素的内容如何，​​这都会使input-group元素保持底部。

.main_item_div { 
position: relative; 
} 

.input-group { 
position: absolute; 
bottom: 0; 
} 

你可以看到在这个fiddle

希望这有助于例子。 谢谢。

Answer 2

你可以试试这个CSS'main_item_div'。

.main_item_div { 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

Answer 3

你可以通过css文本溢出来实现：ellipsis;
你可以使用：
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
OR
http://masonry.desandro.com/

Answer 4

有4个产品具有不同的高度

1 - 你可以为化妆等高jQuery代码

2和与此css代码，你可以把输入组放在每个产品的底部

这是为哟ü

，这是波纹管

$(document).ready(function(){ 
 
    
 
    var highestItem = 0; 
 
    $('.item-inner', this).each(function(){   
 
    if($(this).height() > highestItem) { 
 
     highestItem = $(this).height(); 
 
    }  
 
    });    
 
    $('.item-inner',this).height(highestItem); 
 
    
 
});

.box-container{ 
 
    width: 100%,; 
 
    padding: 20px; 
 
} 
 
.item{ 
 
    padding: 10px; 
 
} 
 
.item-inner{ 
 
    background-color: #f2f2f2; 
 
    padding: 10px; 
 
    box-shadow: 0 0 2px rgba(0,0,0,0.5); 
 
} 
 
.media a img{ 
 
    width: 100%; 
 
} 
 
.content{ 
 
    margin-bottom: 80px; 
 
} 
 

 
.btn-action{ 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div class="box-container"> 
 
\t <div class="row"> 
 

 
\t <div class="item col-md-3 col-xs-6"> 
 
\t \t <div class="item-inner"> 
 
\t \t  <div class="content"> 
 
\t \t  <div class="media"> 
 
\t \t   <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-1" alt="product-1"></a> 
 
\t \t  </div> 
 
\t \t  <h2></h2> 
 
\t \t  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus veritatis reprehenderit magni, alias ullam itaque fugit corporis autem, consequatur, nobis officiis.</p> 
 
\t \t  </div> 
 
\t \t  <div class="btn-action"> 
 
\t \t \t  <div class="input-group"> 
 
\t \t \t \t  <input type="text" class="form-control" value="1"> 
 
\t \t \t \t  <span class="input-group-btn"> 
 
\t \t \t \t   <button class="btn btn-primary" type="button"> 
 
\t \t \t \t    <i class="fa fa-shopping-cart"></i> Action 
 
\t \t \t \t   </button> 
 
\t \t \t \t  </span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="item col-md-3 col-xs-6"> 
 
\t \t <div class="item-inner"> 
 
\t \t  <div class="content"> 
 
\t \t  <div class="media"> 
 
\t \t   <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-2" alt="product-2"></a> 
 
\t \t  </div> 
 
\t \t  <h2></h2> 
 
\t \t  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
\t \t  </div> 
 
\t \t  <div class="btn-action"> 
 
\t \t \t  <div class="input-group"> 
 
\t \t \t \t  <input type="text" class="form-control" value="1"> 
 
\t \t \t \t  <span class="input-group-btn"> 
 
\t \t \t \t   <button class="btn btn-primary" type="button"> 
 
\t \t \t \t    <i class="fa fa-shopping-cart"></i> Action 
 
\t \t \t \t   </button> 
 
\t \t \t \t  </span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="item col-md-3 col-xs-6"> 
 
\t \t <div class="item-inner"> 
 
\t \t  <div class="content"> 
 
\t \t  <div class="media"> 
 
\t \t   <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-3" alt="product-3"></a> 
 
\t \t  </div> 
 
\t \t  <h2></h2> 
 
\t \t  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus.</p> 
 
\t \t  </div> 
 
\t \t  <div class="btn-action"> 
 
\t \t \t  <div class="input-group"> 
 
\t \t \t \t  <input type="text" class="form-control" value="1"> 
 
\t \t \t \t  <span class="input-group-btn"> 
 
\t \t \t \t   <button class="btn btn-primary" type="button"> 
 
\t \t \t \t    <i class="fa fa-shopping-cart"></i> Action 
 
\t \t \t \t   </button> 
 
\t \t \t \t  </span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="item col-md-3 col-xs-6"> 
 
\t \t <div class="item-inner"> 
 
\t \t  <div class="content"> 
 
\t \t  <div class="media"> 
 
\t \t   <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-4" alt="product-4"></a> 
 
\t \t  </div> 
 
\t \t  <h2></h2> 
 
\t \t  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus veritatis reprehenderit magni, alias ullam itaque fugit corporis autem..</p> 
 
\t \t  </div> 
 
\t \t  <div class="btn-action"> 
 
\t \t \t  <div class="input-group"> 
 
\t \t \t \t  <input type="text" class="form-control" value="1"> 
 
\t \t \t \t  <span class="input-group-btn"> 
 
\t \t \t \t   <button class="btn btn-primary" type="button"> 
 
\t \t \t \t    <i class="fa fa-shopping-cart"></i> Action 
 
\t \t \t \t   </button> 
 
\t \t \t \t  </span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t </div> 
 
</div>