Bootstrap 4 flexbox 内容 100% 高度

Question

我在使用 Bootstrap 4 时遇到了一些问题。

我已经激活了 flexbox，我希望列中的内容是 100% 的高度。

这是结构：

<div class="row">
 <div class="col-md-6 col-xs-12">
  <div class="content">
  </div>
 </div>
</div>

这是结果： Flexbox

灰色背景怎么可能是 100% 高度？我试过身高：100%。但是容器将是页面的 100% 高度，而不是列的高度。我还尝试将父级设置为相对，将子级设置为绝对。没用。 背景颜色在内容上设置。

代码示例： http://jsfiddle.net/KjGZw/339/

Answer 1

您需要使用 display:flex 制作 .col div 弹性容器并将 flex-direction:column 应用于这些容器。

然后将.content div 设置为flex:1

.row {
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.col {
  padding: 15px;
  flex: 1 1 25%;
  display: flex;
  flex-direction: column;
}
.content {
  background: purple;
  color: white;
  padding: 15px;
  flex: 1;
}
*,
:after,
:before {
  box-sizing: inherit;
}

<div class="row">
  <div class="col">
    <div class="content">
      Test
      <br />Test
      <br />Test
      <br />Test
      <br />Test
      <br />

    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
      <br>Test
      <br>Test
      <br>Test
      <br>
    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
    </div>
  </div>
</div>