javascript - 相对于另一个分区的 Bootstrap 列高度

Question

我正在使用 bootstrap 的网格布局并具有以下标记:

<div id="prof_cont_enclose">
    <div class="row">
        <div class="prof_cont_row">
            <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 prof_elem">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img src="/techahoy/securedir/m_images/mypic.jpg" width="100%">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 prof_elem">
                <div class="panel panel-default">
                    <div class="panel-body">
                         <h1>T.V.Vignesh</h1>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我已将第 1 列中的图片的宽度设置为 100%，这意味着它将扩展到该列的宽度并相应地调整其高度以保持纵横比。所以，我没有固定的列高度。

我想做的是保持第一行中其他列的高度与第一列的高度相匹配。

这是当前实现的快照:

我提到了 http://getbootstrap.com.vn/examples/equal-height-columns/但它不起作用。请帮帮我。

Answer 1

查看此代码笔: http://codepen.io/dschu/pen/zGQLNN?editors=110

您忘记了您的自定义 CSS:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

我还删除了标题周围的一个包装 div。