Question

在Bootstrap 4 Alpha 3中启用flexbox支持之前，我的代码运行良好：

然而，在启用flexbox支持后，我无法使其工作。如果有办法使用Bootstrap 4 built-in Flexbox grid system features，那将是最好的！

HTML

<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: fill remaining space and scroll<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

  <div class="row footer">
      footer
  </div>
</div>

CSS

.wrapper {
  height: 20rem;
  display: flex;      /* if remove this, the style will be correct, but won't scroll */
  flex-flow: column;  /* if remove this, the style will be correct, but won't scroll */
}

.header {
  background: tomato;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
}

Answer 1

CSS 的细微更改将帮助您在启用了 flex 的 Bootstrap 4 的情况下实现相同的目标：默认情况下，在 Bootstrap 4 中，它将着名类.row的默认属性更改为：

.row {
    display: flex;
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
    flex-wrap: wrap;
}

即。为什么你的结构与以前不一样，你需要做的就是把它的 CSS 改成以前的结构：

CSS

.wrapper {
  height: 20rem;
  display: flex;
  flex-flow: column;
}
.row {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}
.row:before, 
.row:after {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
}

这是更新后的JSFiddle

Answer 2

受@ vivekkupadhyay的启发，另一种方式，只需将display: block;添加到页眉和页脚。

jsfiddle

<强> HTML

<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: fill remaining space and scroll<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

  <div class="row footer">
      footer
  </div>
</div>

<强> CSS

.wrapper {
  height: 20rem;
  display: flex;
  flex-flow: column;
}

.header {
  background: tomato;
  display: block;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
  display: block;
}

可滚动div占用剩余高度（Bootstrap 4 Flexbox网格系统）

2 个答案:

CSS