使用 Bootstrap 将列设置为等高。答案

【问题标题】：Set Columns to be Equal Height with Bootstrap.使用 Bootstrap 将列设置为等高。
【发布时间】：2015-12-22 16:50:17
【问题描述】：

这是我的网页目前的样子：

我想要的是框 1 的高度等于框 3 的高度，如果有更多文本要添加到框 1 或框 3 等（框 2 和框 4 也是如此，在同时）。我还希望将较短边的长度延长，使其与较长边的长度相同，从而使两侧（绿色框和 4 个框组合）具有相同的高度。

更简单地说：框 1、2、3 和 4 都具有相同的高度。如果需要，四个盒子和绿色盒子都向下延伸到相同的高度，因此绿色盒子的高度大约是一个较小盒子高度的两倍。

这是我目前的代码：

<div class="container">
  <div class="row">
    <div class="col-xs-6" id="big-box">
      <div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
      </div>
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-6">
          <div class="mini-box" id="firstBox">1</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="secondBox">2</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="thirdBox">3</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="fourthBox">4</div>
        </div>
      </div>
    </div>
  </div>
</div>

用一些基本的 CSS 来改变文本的外观和背景颜色等。

我尝试过使用 Javascript、Bootstrap 和 CSS 属性来尝试使这成为可能，但到目前为止没有任何效果。有什么帮助吗？

提前致谢

【问题讨论】：

How can I make Bootstrap columns all the same height?的可能重复
@halfzebra 我已经尝试使用那里的答案，由于我在左侧有 4 个框，所以没有一个有效。 ://
codepen.io/micahgodbolt/pen/FgqLc credits 转到 => Micah Godbolt 响应版本
@DannyGoodall 这是另一个选项An equal height grid using Flexbox 如果Bootstrap equal-height columns 不够好。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我个人不喜欢引导类名称，但这不是重点。所以我认为你需要更改 CSS：

.row {
    position: relative; // set bounds for mini-box absolute.
}
.mini-box {
    position: absolute;
    top: 0px;
    bottom: 0px;
}

【讨论】：

【解决方案2】：

我不是 bootstrap 的忠实粉丝，所以我有一个替代方案，弹性盒。父母有一个height: 200px;，每个孩子都会对齐，但我无法用row 中的第二个孩子来解决它。所以我用height: 95px; 修复了它，因为10px margin

.parent {
  align-items: flex;
  display: flex;
  height: 200px;
}
row {} .child1 {
  background-color: green;
  color: #fff;
  width: 300px;
  margin: 0 10px;
}
.child2 {
  background-color: grey;
  color: #fff;
  margin: 0 10px 10px;
  height: 95px;
}
.child3 {
  background-color: red;
  color: #fff;
  margin: 0 10px;
  height: 95px;
}
.child4 {
  background-color: pink;
  color: #fff;
  margin: 0 10px 10px;
  height: 95px;
}
.child5 {
  background-color: black;
  color: #fff;
  margin: 0 10px;
  height: 95px;
}

<div class="parent">
  <div class="child1">text big</div>
  <div class="row">
    <div class="child2">text 1</div>
    <div class="child3">text 2</div>
  </div>
  <div class="row">
    <div class="child4">text 3</div>
    <div class="child5">text 4</div>
  </div>
</div>

css tricks 了解更多关于 flexbox 的信息

【讨论】：