Question

我的bootstrap列有fieldset，我正在尝试为列创建相同的高度。对于相同的高度我正在使用这篇文章Bootstrap 3 responsive columns of same height但这适用于fieldset。我在这里有例子。

JSFiddle

Answer 1

即使您为fieldset设置了100％的高度，父高度也是未知的。将父div容器高度设置为100％。您需要进行以下更改。

<强> CSS

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
  height: 100%;
}

.col-xs-height {
  display: table-cell;
  float: none !important;
  height: 100%;
}

JSfiddle

Answer 2

为了使这两个元素的高度相同，您需要正确构建table数据。这意味着在table-row课程之后添加.row-same-height DIV。

<div class="row-same-height">
  <div class="tablerow">
    <div class="col-md-5 col-xs-height col-top">...</div>
    <div class="col-md-5 col-xs-height col-top">...</div>
  </div>
</div>

然后我调整了CSS，相应地将height:100%添加到你的表，表行和表格单元格中。

.row-same-height {
  display: table;
  width: 100%;
  table-layout: fixed;
  height: 100%;
}
.tablerow {
    display: table-row;
    height: 100%;
}
.col-top {
  vertical-align: top;
  height: 100%;
}

你可以see your updated Fiddle here。希望有所帮助。

boostrap列与fieldsets相同的高度

2 个答案: