Question

我有一个显示屏，允许用户查看带有自己描述的选定图标。

我正在使用带有col-md-4的bootstrap 3.4，以便每行显示3个图标（总共有9个图标及其描述）。

描述最长可达40个字符，这可以使显示每个图标的div具有不同的高度，因为描述可以包裹3行（如下所示）。

这是我目前的问题：

这就是我试图获得的，即使文本描述的长度不同：

我没有使用表格方法，因为用户只能输入两个图标，比如第一个图标和最后一个图标，所以它们必须彼此相邻。

我已经尝试将200px的高度添加到CSS类visual_preview_standard，尽管这确实有效，但这种方法会使每个图标的div太高，特别是如果用户只输入一个不包装的小描述超过两行或更多行。有太多不必要的空白区域。

我搜索了SO并阅读了此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代码：

.visual_preview_standard {
    overflow: hidden;
    text-align: center
}

.padding-bottom-10 {
    padding-bottom: 10px
}

Answer 1

默认情况下，在bootstrap中没有设置div的大小，当你编写css overflow：hidden时，它在指定高度或宽度时工作，检查div的高度并设置为你所需的大小，然后设置overflow属性。希望它会有所帮助

Answer 2

有多种方法可以实现这一目的：用row包裹你的列并为其添加负边距

.row [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row{
  overflow: hidden; 
}

以下是Codepen *修改：已更新

Answer 3

你可以设置你的主div中识别的div，这个div有bootstrap的类，如下所示：

<div class="myicons"> 
<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样式将是：

.myicons .visual_preview_standard {
     height: 300px;

}

Answer 4

创建一个外部div并在其中包装各种div ..

并记得修复这些职位.. 并相应地更改你的CSS

Answer 5

你可以尝试这种方法 { 位置：绝对; 白色空间：nowrap; 溢出：隐藏; }

CSS如何使用bootstrap 3 col-md-4

5 个答案: