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

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

您忘记了自定义css：

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

我还在你的标题周围删除了一个包裹div。

Answer 2

您的实现的问题是您在行元素和列元素之间有一个div元素。 display: flex语句对该元素的直接子元素有影响，因此您的列必须是应用了flex样式的行的直接子元素。

使用自己的样式和标记来干扰网格系统几乎不是一个好主意。相反，修改网格内的内容。

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

<div class="row">
    <div class="col-xs-6 prof_elem">
        <div class="panel panel-default">
            <div class="panel-body">

Demo

如果要将面板元素与列组合并保留默认间距，则需要实现其他CSS：

.row > div.panel {    /* column elements */
    margin: 10px;
}

<div class="col-xs-6 prof_elem panel panel-default">

<强> Demo 2

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

2 个答案: