如何使面板的父div全高？

Question

我在具有以下HTML的表單上使用Bootstrap 3，其中包含4個面板，其結構與以下示例相同。

我的問題是每個面板包含不同的面板，因此顯示的高度不同。 我嘗試向他們添加style="height:100%" ，但是沒有任何改變。

有人可以告訴我如何設置它們始終保持高度，而與它們的內容無關嗎？ 基本上，我想要實現的是使所有四個面板的高度與它們在一行中顯示的高度相同- 它們唯一不同的是帶有可變文本的段落 ，所有其他面板都相同並且采用相同的方式每個人的身高。

示例面板：

<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空間）顯示。

為了進行比較，以下是沒有額外規則的示例 ： http : //jsfiddle.net/o7p1jtjv/2/

<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>

---

.row
{
    overflow: hidden;
}

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

Answer 2

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

.thumbnail {
    height: 300px;
}

縮略圖類不響應百分比高度變化。

Answer 3

就像@Dan所說的，panel類將是一個更好的選擇。 如果您不想使用固定高度，則可以使用CSS flexbox這樣。

http://www.bootply.com/IwBoyELqpx