如何使用同一塊內嵌的元素顯示Bootstrap網格視圖？

我使用引導「列表網格產品視圖」樣本和網格元素顯示正常時，描述和圖片高度是相同的。如何使用同一塊內嵌的元素顯示Bootstrap網格視圖？

工作樣品：https://codepen.io/ajaypatelaj/pen/zIBjJ

問題出現在當說明，價格和圖片是不同高度的，並且不顯示在在線元件：

https://codepen.io/getkitchendeal/pen/gRgGeG

我試圖=>

固定

display: inline-block; 
vertical-align: top;

來源

2017-06-17 Kitchen Deal

有一種方法可以解決這個問題，但它很醜。這就是所謂的clearfix黑客。看看這個貼子What does the clearfix class do in css?

來源

2017-06-17 15:07:02 Jonathan

謝謝你，我結束了使用clearfix類，並添加行級動態（https：//開頭thank you，your solution did work and I have updated the codepen code：（https：//stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols） –

我在這裏要做的是修復網格系統每個塊的最小高度。

創建一個新的CSS規則：

.list-group-item .thumbnail { 
    min-height: inherit; 
}

，並添加.thumbnail另一個

.thumbnail { 
    margin-bottom: 20px; 
    padding: 0px; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 0px; 
    min-height: 400px; #new rule 
}

來源

2017-06-17 15:15:49

/codepen.io/getkitchendeal/pen/gRgGeG） –

@KitchenDeal將其標記爲acce如果有用的話，或者至少可以贊成 –

如何使用同一塊內嵌的元素顯示Bootstrap網格視圖？

回答

相關問題