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演示

Answer 1

你正在使用Bootstrap 4,对吧？Bootstrap 4默认实现了flexbox,你可以在使用纯类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小提琴链接:https://jsfiddle.net/ydjds2ko/

细节:

• 你不需要这个类row-eq-height(它不是在Bootstrap4中),因为默认高度相等.

• 该类的第一个div具有col-sm-8正确的高度,它在黑色背景下是不可见的,因为内部div具有它自己的高度.我刚删除了内部div并将类添加black到col.如果你需要内部div,给它(Bootstrap4)类h-100,它调整父元素的高度.

• 使用类col-sm-4的div得到一个类d-flex align-content-around flex-wrap.他们正在调整内容div.Bootstrap doku:https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

  • 将此容器内div的宽度设置为父级w-100的宽度

• 因为<p>在底部添加了边距,所以末端的蓝色div不会与黑色div齐平.我添加了类"mb-0",它将边距底部设置为"0",这样你就可以看到它的工作原理.

这应该工作,右边或左边的div是具有更大高度属性的那个.

编辑:添加了内容对齐的类.

Answer 2

这是一个非常简单的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 实用程序类来制作正确的列填充高度。

相关：
bootstrap 4 行高

Answer 3

您可以为此使用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
}