Question

我在具有以下HTML的表单上使用Bootstrap 3，其中包含4个面板，其结构与下面的示例相同。

我的问题是每个面板都包含不同的面板，因此显示的高度不同。我尝试向他们添加style="height:100%"，但这并没有改变任何东西。

有人可以告诉我如何将它们设置为始终占据全部高度，与其内容无关吗？基本上，我想要实现的是让所有4个面板的高度与它们在一行中显示的高度相同 - 它们唯一不同的是具有可变文本的段落，其他一切都是相同的对于所有面板，每个面板都采用相同的高度。

示例小组：

<form role="form">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="thumbnail thumbnail-hover">
                <div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
                    <div class="caption">
                        <h3 class="text-primary">Title</h3>
                        <p>Some variable text</p>
                        <p><a href="#" class="btn btn-info btn-block btn-responsive" target="_self">View</a></p>
                    </div>
            </div>
        </div>
    </div>
    // ...same structure for other panels...
</form>

Answer 1

以下是我的所作所为：http://jsfiddle.net/o7p1jtjv/1/

通过将.row设置为隐藏溢出，然后为每个列div设置margin-bottom等于padding-bottom，可以强制它们全部大于.row div，但没有显示溢出的内容（额外的<div class="container-fluid"> <div class="row"> <div class="col-xs-4"> <p>text</p> </div> <div class="col-xs-4"> <p>text</p> </div> <div class="col-xs-4"> <p>text</p> </div> </div> </div>空格）。

为了进行比较，这里没有额外的规则：http://jsfiddle.net/o7p1jtjv/2/

.row
{
    overflow: hidden;
}

.row > div
{
    background: red;
    margin-bottom: -999999px;
    padding-bottom: 999999px;
}

{{1}}

Answer 2

要调整thumbnail的高度，请使用固定像素高度，例如300px。

.thumbnail {
    height: 300px;
}

缩略图类不响应百分比高度变化。

Answer 3

就像@Dan所说，小组课程将是一个更好的选择。如果您不想使用固定高度，可以像这样使用CSS flexbox ..

http://www.bootply.com/IwBoyELqpx

如何制作父div的全高度？

3 个答案: