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属性正如宣传的那样工作：问题是中心列的内容导致其高度增加超过30px。

您可以使用jQuery来解决此问题：

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

（我将dep类添加到左列和右列，将主类添加到中心列。）

我们基本上得到中心元素的高度，并将角元素的高度设置为该高度。

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

希望有所帮助：）

Bootstrap 3中的等高柱高度

1 个答案: