如何在Bootstrap中自动调整行高?

时间:2018-09-27 13:34:36

标签: html css twitter-bootstrap bootstrap-4

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

  • 容器流体
  • 中有3行
  • 第1行必须调整为其内容的高度
  • 第3行必须调整其内容的高度,并位于视口的底部
  • 第2行应将其高度调整为第1行第3行之间的空间,以填充容器流体 < / li>

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 demo

这样做的最佳方法是什么?预先谢谢你!

2 个答案:

答案 0 :(得分:1)

您正在寻找flexbox实用程序类。 d-flex用于display:flexflex-grow-1将使第二个子div填充剩余的高度。要使用垂直布局,请使用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中设置的固定高度已被删除,以使页眉/页脚可以作为其内容的高度,而内容行则可以填充其余高度。


相关:
Bootstrap 4: How to make the row stretch remaining height?
Bootstrap - Fill fluid container between header and footer

答案 1 :(得分:0)

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

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