Bootstrap 侧边栏的高度不正确

Question

我正在尝试在我的模板左侧制作一个典型的边栏。我正在使用 bootstrap 4.

这是代码：

    <nav class="team-left-column col-12 col-md-4 col-lg-2" style="background-color:#6c757d;">
    <div class="dashboard-sidebar js-sticky top-0 px-3 px-md-4 px-lg-4 overflow-auto">
        <ul class="sidebar navbar-nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span data-feather="home"></span>
                    Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file"></span>
              Orders
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="shopping-cart"></span>
              Products
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="users"></span>
              Customers
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="bar-chart-2"></span>
              Reports
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="layers"></span>
              Integrations
            </a>
          </li>
        </ul>
    </div>
</nav>

为什么 Y 尺寸显示不正确？我希望它能够响应，请不要，例如style="height:1280px;"。我只想让它从导航栏显示到屏幕的最底部。我正在从 bootstrap 复制示例，但它不起作用。我做错了什么？

Answer 1

在该组件上尝试一些 css，以便它始终具有视图的高度

.dashboard-sidebar {
    height: 100%;
}

Answer 2

解决方法：

<nav class="team-left-column col-md-4 col-lg-2 position-fixed" style="background-color:#6c757d;height:100vh;margin-top: 58px;">

我不得不使用 height:100vh 和 margin-top。我还做了 position-fixed 以便在滚动主容器时不获取边栏的滚动内容。

Bootstrap 侧边栏的高度不正确

Bootstrap Sidebar is not getting the right height

html

css

frontend

sidebar

bootstrap-4