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％高度而不是列的高度。我也尝试将父亲设置为亲戚，将子设置为绝对。不起作用。背景颜色设置在内容上。

Codeexample： http://jsfiddle.net/KjGZw/339/

Answer 1

您需要使用.col创建display:flex divs flex-containers，并将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>

Bootstrap 4 flexbox内容100％高度

1 个答案: