css - Bootstrap 3 中的列高相等

Question

我有一个使用 Bootstrap 3 的页面。我正在尝试修复一些边框问题。我的代码如下所示，可以找到一个 Bootply here .

<div class="container">
  <div class="row">
    <div class="col-md-4" style="border-color:#eee; border-style:solid; border-width:1px 0 1px 1px; min-height:30px;">
    </div>
    <div class="col-md-4" style="border-color:#eee; border-style:solid; border-width:1px 0 1px 1px; min-height:30px;">
      <div>
        <label class="control-label">First Name</label><br>
        <input type="text" title="" class="form-control">
        <p>Please enter your first name</p>
      </div>
    </div>
    <div class="col-md-4" style="border-color:#eee; border-style:solid; border-width:1px 1px 1px 1px; min-height:30px;">
    </div>
  </div>
</div>

我试图在行中的每一列周围添加边框。无论我做什么，我都无法使行的高度相同。我需要做什么才能使列的高度相同？

谢谢

Answer 1

min-height 属性如宣传的那样工作:问题是中心列的内容导致其高度增加超过 30 像素。

您可以使用 jQuery 来解决这个问题:

$(document).ready(function() {
  $(".dep").height($(".main").height());
});

(我在左右两列添加了dep类，在中间列添加了主类。)

我们实质上是获取中心元素的高度并将 Angular 元素的高度设置为该高度。

演示:http://codepen.io/awesomeaniruddh/pen/eNXXBE

希望对您有所帮助:)