Bootstrap 4 Bootstrap 4响应性垂直导航条高度大空间

我正在尝试使用引导程序制作一个响应灵敏的垂直导航条。我有一个问题，在我的桌面上，它按预期工作（导航栏100%高度位于左侧），但在移动设备上，有一个很大的空间，我无法移除

我已经圈出了下面我想移除的区域

项目等，使其垂直

您可以使用媒体查询，并根据设备需要将html中的h-100替换为以下任何类别，以便仅从特定设备开始应用：

@media (min-width: 576px) {

  .h-sm-100 {
    height: 100% !important;
  }
 .h-sm-auto {
    height: auto !important;
  }
}

@media (min-width: 768px) {

  .h-md-100 {
    height: 100% !important;
  }
  .h-md-auto {
    height: auto !important;
  }
}

@media (min-width: 992px) {

  .h-lg-100 {
    height: 100% !important;
  }
  .h-lg-auto {
    height: auto !important;
  }
}

@media (min-width: 1200px) {

  .h-xl-100 {
    height: 100% !important;
  }
  .h-xl-auto {
    height: auto !important;
  }
}

---

使用

min-vh-100

和响应flexbox方向类

flex column flex md row

，而不是使用h-100强制行为100%高度

链接
链接
链接
链接
链接
链接
内容

这是因为

h-100

我如何在桌面上保留h-100，但在手机上删除它？你有其他CSS吗？请把它寄出去。还要说明你想做什么？移动设备上的导航栏是全宽的还是垂直侧边栏？如何支持桌面上的外观？没有其他CSS。在手机上，它是全宽的，带有可点击的下拉菜单。在桌面上，它是一个垂直的边栏。

@media (min-width: 576px) {

  .h-sm-100 {
    height: 100% !important;
  }
 .h-sm-auto {
    height: auto !important;
  }
}

@media (min-width: 768px) {

  .h-md-100 {
    height: 100% !important;
  }
  .h-md-auto {
    height: auto !important;
  }
}

@media (min-width: 992px) {

  .h-lg-100 {
    height: 100% !important;
  }
  .h-lg-auto {
    height: auto !important;
  }
}

@media (min-width: 1200px) {

  .h-xl-100 {
    height: 100% !important;
  }
  .h-xl-auto {
    height: auto !important;
  }
}

<div class="container-fluid">
    <div class="row min-vh-100 flex-column flex-md-row">
        <div class="col-md-2 pr-md-0 bg-light">
            <nav class="navbar navbar-expand-md navbar-light flex-row flex-md-column align-items-start px-0">
                <a class="navbar-brand" href="/">
                    <img src="//placehold.it/30">
                </a>
                <a class="navbar-toggler" href="#" data-toggle="collapse" data-target="#navbarToggle">
                    <span class="navbar-toggler-icon"></span>
                </a>
                <div class="collapse navbar-collapse ml-md-n2" id="navbarToggle">
                    <div class="navbar-nav ml-auto flex-column">
                        <a class="nav-link">Link</a>
                        <a class="nav-link">Link</a>
                        <a class="nav-link">Link</a>
                        <a class="nav-link">Link</a>
                        <a class="nav-link">Link</a>
                        <a class="nav-link">Link</a>
                    </div>
                </div>
            </nav>
        </div>
        <div class="col pt-md-3" id="applicationContentContainer">
            Content
        </div>
    </div>
</div>