Boostrap 4 - 底部的空白空间

Question

当我创建我的页面并在我的中等屏幕（或更小）上查看它时，一切正常。

当我在大型显示器上查看时，底部有一个空的空白区域。 如果我在页面中填充更多内容，则会删除空格。

没有太多内容时空格。

用文字填充时没有空格

I searched through some other questions like this one, but I can't find a solution.

This one too.

身体：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-1 col-lg-1">
      <ul class="nav ">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Images</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Upload</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#">Register</a>
        </li>
      </ul>
    </div>
    <div class="col-md-11 col-lg-11">
      <p class="display-4 text-center">TEXT</p>
      <p>TEXT</p>
    </div>
  </div>

  <div class="row ">
    <div class="col-md-12 col-lg-12 text-center align-self-center">
      <p class="h4">TEXT</p>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12 col-lg-12">
      <div class="media">
        <img class="mr-3" src="woman1.png" width="64px" height="64px" alt="Generic placeholder image">
        <div class="media-body">
          <h5 class="mt-0">TEXT <span class="text-muted">TEXT</span></h5>
          TEXT
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12 col-lg-12 mt-2">
      <div class="media">
        <img class="mr-3" src="man1.png" width="64px" height="64px" alt="Generic placeholder image">
        <div class="media-body">
          <h5 class="mt-0">TEXT <span class="text-muted">TEXT</span></h5>
          TEXT
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12 col-lg-12  text-center">
      <span class="text-muted">TEXT<br>TEXT</span>
    </div>
  </div>
</div>

我该如何解决，为什么会发生？

谢谢。