1
我有一個顯示，允許用戶查看具有自己描述的選定圖標。CSS如何使用引導程序設置div高度相同3 col-md-4
我使用引導3.4與col-md-4，以便每行顯示每個圖標3（共有9個圖標及其說明）。
描述最多可以有40個字符的長度，這可以使顯示每個圖標的div的高度不同，因爲描述可以包含3行（如下所示）。
這是我現在有這個問題：
這就是我試圖得到，即使文字說明是不同的長度：
我沒有使用表格方式，因爲用戶只能輸入兩個圖標，例如第一個圖標和最後一個圖標，因此它們必須彼此相鄰。
我已經嘗試在CSS類visual_preview_standard上添加一個200px的高度，雖然這確實有效，但這種方法會使每個圖標的div太高，特別是如果用戶只輸入一個不包含兩個或更多更多線條。有太多不必要的空白空間。
我有搜索和閱讀本post這post（以及許多其他），但我在每個崗位試圖解決方案的所有圖標顯示彼此相鄰的一條線，而不是每行3個圖標。
任何建議，將不勝感激。
這裏是我的HTML代碼：
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: indianred;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 1" %}</b>
</div>
</div>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: wheat;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 2 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
</div>
</div>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: gold;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 3" %}</b>
</div>
</div>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: aqua;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 4 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
</div>
</div>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: orange;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 5" %}</b>
</div>
</div>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: lime;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 6" %}</b>
</div>
</div>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: yellow;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 7 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
</div>
</div>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: aliceblue;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 8" %}</b>
</div>
</div>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: pink;">
<div class="row">
<icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
</div>
<div class="row">
<b>{% trans "Test 9 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
</div>
</div>
這裏是我的CSS代碼：
的div.visual_preview_standard {
overflow: hidden;
text-align: center
}
.padding-bottom-10 {
padding-bottom: 10px
}
謝謝，但我不能使用你的解決方案，因爲你已經將每個3個div包裝在它自己的行中。如果用戶只選擇顯示第一個div和最後一個div，則兩個選定的div不會彼此相鄰 - 您的代碼將它們放在單獨的行/行上。 – user1261774
@ user1261774我不認爲你會找到一個答案，除了這一個，如果你不使用js –