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 –