Bootstrap 4 flexbox内容100%高度

问题描述 投票:1回答:1

我在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/

html css height flexbox bootstrap-4
1个回答
3
投票

你需要使用.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>
© www.soinside.com 2019 - 2024. All rights reserved.