Bootstrap 4 中列的高度相等

Question

我在这个设计中有点非常规DIV如下图。我可以使用一个高度来做，但我希望它动态变化：例如，如果 DIV 有更多内容并且右侧块之一的高度发生变化，则左侧 DIV 也会自动调整其高度。我想知道 flex 是否可以提供帮助。以下是它应该如何更改为：

到目前为止我有这个HTML：

<div class="container">
  <div class="row row-eq-height">
      <div class="col-sm-8 col-8">
        <div class="black">
          <p>Bar Graph or Line Graph</p>
        </div>
      </div>
      <div class="col-sm-4 col-4">
        <div class="red">
          <p>numbers</p>
        </div>
        <div class="purple">
          <p>numbers</p>
        </div>
        <div class="green">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p>numbers</p>
        </div>
      </div>
  </div>
</div>

和CSS：

p { color: #fff; }
.black { background-color: black; }
.green { background-color: green; }
.red { background-color: red; }
.blue { background-color: blue; }
.purple { background-color: purple; }

JSFiddle Demo

Answer 1

您可以为此使用 flexbox。

更新

另一种方式：

https://jsfiddle.net/persianturtle/ar0m0p3a/5/

.row-eq-height > [class^=col] {
  display: flex;
  flex-direction: column;
}

.row-eq-height > [class^=col]:last-of-type div {
  margin: 10px;
}

.row-eq-height > [class^=col]:last-of-type div:first-of-type {
  margin-top: 0;
}

.row-eq-height > [class^=col]:last-of-type div:last-of-type {
  margin-bottom: 0;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

更新

更具体的更好方法类：

https://jsfiddle.net/persianturtle/ar0m0p3a/3/

.row-eq-height > [class^=col]:first-of-type {
  display: flex;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

.blue p {
  margin: 0;
}

原始方式：

https://jsfiddle.net/persianturtle/ar0m0p3a/1/

[class^=col] {
  display: flex;
  flex-direction: column;
}

[class^=col] div {
  flex-grow: 1
}

Answer 2

您正在使用 Bootstrap 4，对吗？ Bootstrap 4 默认实现 flexbox，你可以很容易地解决这个问题，而只使用 classes Bootstrap 4 提供：

<div class="container">
  <div class="row">
      <div class="col-sm-8 col-8 black">
          <p>Bar Graph or Line Graph</p>
      </div>
      <div class="col-sm-4 col-4 d-flex align-content-around flex-wrap">
        <div class="red">
          <p>numbers and more and so on and on and on</p>
        </div>
        <div class="purple">
          <p>numbers</p>
        </div>
        <div class="green">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p class="mb-0">numbers</p>
        </div>
      </div>
  </div>
</div>

JS Fiddle link: https://jsfiddle.net/ydjds2ko/

详情：

您不需要 class row-eq-height（它不在 Bootstrap4 无论如何）因为默认为等高。
第一个div和class col-sm-8的高度合适，就是黑底看不出来，因为里面的div 有它自己的高度。我刚刚删除了内部 div 并将 class black 添加到列中。如果你需要 inner div，给它 (Bootstrap4) class h-100 来调整父元素的高度。
div 与 class col-sm-4 得到 classes d-flex align-content-around flex-wrap。他们正在对齐内容 div。 Bootstrap独库：https://getbootstrap.com/docs/4.0/utilities/flex/#align-content
- 使用 w-100
因为<p>在底部加了边距，你的蓝色div在末端不与黑色 div 齐平。我添加了 class "mb-0"，它将底部边距设置为“0”，因此您可以看到它有效。

无论是右边还是左边 div 的高度属性都应该有效。

编辑：为内容对齐添加了 classes。

Answer 3

这里有一个非常简单的Bootstrap 方法。您不需要任何额外的 CSS.

https://www.codeply.com/go/J3BHCFT7lF

<div class="container">
  <div class="row">
      <div class="col-8">
        <div class="black h-100">
          <p>Bar Graph or Line Graph</p>
        </div>
      </div>
      <div class="col-4 d-flex flex-column">
        <div class="red mb-2">
          <p>numbers</p>
        </div>
        <div class="purple mb-2">
          <p>numbers with more lines of content that wrap to the next line</p>
        </div>
        <div class="green mb-2">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p>numbers</p>
        </div>
      </div>
  </div>
</div>

这使用Bootstrap 4 utility classes来制作右列填充高度。

Bootstrap 4 中列的高度相等

Equal height of columns in Bootstrap 4

twitter-bootstrap

css

bootstrap-4

twitter-bootstrap-4

更新

更新