如何自动调整鞋带中的行高？

Question

我正在学习Bootstrap，并试图弄清楚在这种情况下如何自动调整行高：

• 在container-fluid中有3行
• row1必须调整其内容的高度。
• row3必须调整其内容的高度，并位于视图端口的底部。
• container-fluid row2应将其高度调整到row1和row3之间的空间，以填充row2

​

html, body, .container-fluid {
  height: 100%;
  background: lightyellow;
}

.col {
  border: solid 1px #6c757d;
}

.content-1 {
  height: 50px;
  background-color: lightcoral;
}

.content-2 {
  height: 200px;
    background-color: lightgreen;
}

.content-3 {
  height: 25px;
  background-color: lightblue;
}

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="content-1">
      ROW 1 -> Height of its content
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-2">
      ROW 2 -> Height between row1 and row3 automatically adjusted
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-3">
      ROW 3 -> Height of its content
      </div>
    </div>
  </div>
</div>

​

JSFiddle演示

这样做最好的方法是什么？提前谢谢你！

Answer 1

您在寻找flexbox实用程序类。d-flex代表display:flex，flex-grow-1将使第二个子分区填充剩余的高度。如果您想要垂直布局，请使用flex-column。

<div class="container-fluid d-flex flex-column">
  <div class="row">
    <div class="col">
      <div class="content-1">
      ROW 1 -> Height of its content
      </div>
    </div>
  </div>
  <div class="row flex-fill">
    <div class="col d-flex flex-column">
      <div class="content-2 h-100">
      ROW 2 -> Height between row1 and row3 automatically adjusted
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-3">
      ROW 3 -> Height of its content
      </div>
    </div>
  </div>
</div>

https://www.codeply.com/go/IIVJqGJ2qG

注意:自定义CSS中设置的固定高度已被移除，以允许页眉/页脚作为其内容的高度，并允许内容行填充剩余的高度。

相关信息：

引导4:如何使行伸展保持高度？

引导-在页眉和页脚之间填充液体容器

Answer 2

我看到你使用引导程序4，但是任何使用引导程序3或者根本不使用任何CSS库的人，解决方案将是下面的代码。

.parent-row{
 display: flex;
}
.children-columns{
  display: flex;
}