如何让Bootstrap 4行占据剩余高度？

如何在 Bootstrap 4 中使行填充剩余高度

问题

在 Bootstrap 4 中，如何使行拉伸以占据剩余高度剩余可用高度？将 h-100 添加到 row 类会在屏幕底部留下一个空白。

示例代码

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

解决方案

填充中的剩余空间红色列和蓝色行，使用 Bootstrap 4.1 类flex-grow-1.

...
<div class="row justify-content-center bg-blue flex-grow-1">
  <div class="text-white">ROW 2 - grow remaining height</div>
</div>
...

修订后的代码

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

示例

[查看现场演示](https://codeply.com/go/Iyjsd8djnz )

以上是如何让Bootstrap 4行占据剩余高度？的详细内容。更多信息请关注PHP中文网其他相关文章！