Bootstrap Grid Columns Not Aligning

Question

我試圖在整個頁面（四列）使用四種產品在bootstrap中創建一個響應式網格。我希望每個產品的包裝盒能夠在整個頁面上完美排列。標題中有不同數量的文字時，我遇到問題。可以看到下面的問題（注意，我還沒有添加第四個產品）。

https://ibb.co/kE1UH5

這裏是我的HTML

<div class="container bg"> 
<!-- Three columns of text below the carousel --> 
     <div class="row"> 
     {% for deal in deals %} 
     <div class="col-xs-12 col-sm-6 col-md-3 rwrapper"> 
      <div class="rlisting"> 
     <div class="col-md-12 nopad hover11"> 
      <figure><img src="{{ deal.image.url }}" class="img-responsive" style="width:250px;height:250px;margin:20px"></figure> 
     </div> 
     <div class="col-md-12 nopad"> 
      <h5>{{ deal.retailer}}</h5> 
      <h3>{{ deal.title}}</h3> 
      <h3><strong>{{deal.price}}</strong><h3> 
      <div class="rfooter"> 
      <i class="fa fa-phone-square"></i><a href="{{deal.link}}" role="button" class="btn btn-success">See Deal</a> 
      </div> 
     </div> 
     </div> 
    </div> 
{% endfor %} 

</div> 
</div> 

和CSS這裏代碼：

.bg{background-color: #dfdfdf;} 
.rwrapper{padding: 1px;} 
.rlisting{background-color: #fff;overflow: hidden;} 
.rlisting img{width: 100%} 
.nopad{padding:0;} 
.rfooter{width: 50%;} 
.rlisting h5,.rlisting p{padding:0 15px; font-style:italic;} 
.rlisting h3,.rlisting p{padding:0 15px;} 

/* Opacity #1 */ 
.hover11 figure img { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover11 figure:hover img { 
    opacity: .5; 
} 

.column { 
    margin: 15px 15px 0; 
    padding: 0; 
} 
.column:last-child { 
    padding-bottom: 60px; 
} 
.column::after { 
    content: ''; 
    clear: both; 
    display: block; 
} 
.column div { 
    position: relative; 
    float: left; 
    width: 300px; 
    height: 200px; 
    margin: 0 0 0 25px; 
    padding: 0; 
} 
.column div:first-child { 
    margin-left: 0; 
} 
.column div span { 
    position: absolute; 
    bottom: -20px; 
    left: 0; 
    z-index: -1; 
    display: block; 
    width: 300px; 
    margin: 0; 
    padding: 0; 
    color: #444; 
    font-size: 18px; 
    text-decoration: none; 
    text-align: center; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
    opacity: 0; 
} 
figure { 
    margin: 0; 
    height: 250px; 
    width: 250px; 
    padding: 0; 
    background: #fff; 
    overflow: hidden; 
} 
figure:hover+span { 
    bottom: -36px; 
    opacity: 1; 
} 

.navbar { 
    margin-bottom:-1px; 
    border-radius:0; 
} 
#submenu { 
    background-color: #e7e7e7; 
    margin-bottom:20px; 
    min-height:0; 
} 
.navbar-nav{margin:0} 
.collapsing { 
    display:none; 
} 
.jumbotron { 
    margin-top: 50px; 
    } 

.nav-2{ 
    position:fixed; 
    top:50px; 
    left:0px; 
    width:100%; 
    background:#fff; 
    padding-top:0px; 
    padding-bottom:0px; 
} 

.container-2{margin-top:120px} 

Answer 1

我會用scss而不是css使它更容易些，並設置高度該標題是您希望顯示的最大行數的倍數。

$line-height: 20px; 
$line-count: 3; //Example of 3 lines 
.title { 
    line-height: $line-height; 
    height: $line-count * $line-height; 
} 

那麼你也應該限制你顯示到一個合理的限度，將不會超過3行文本的長度（如果需要添加一個省略號）。

在這個例子中，這當然也可以用css完成並將其設置爲60px。