Bootstrap flex儿童等高容器

Question

我正在尝试将html表重写为bootstrap flex divs。

堆栈上如何保持容器的逻辑子元素的高度相同？

https://jsfiddle.net/48qdk3r5/1/

看起来有点不正常，然后我试着设置。内容高度为100%，下一行元素溢出第一行。

<div class="container">
  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
<!--end first row -->

  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
</div>```

I expect all elements of row to be the same height.

Answer 1

你可以通过提高自己的水平来达到同样的高度。col divs也是flexbox，并使用flex-grow来扩展。内容框：

.col{
  display: flex;
  flex-flow: column;
}
.col .content{
  flex-grow: 1;
}

请参阅此更新的JSFIDLE：https://jsfiddle.net/t29ph10d/