为什么 Bootstrap 导航栏总是折叠？

Question

我更新到 ng-bootstrap 的 v1.0-beta。现在导航栏总是折叠的。当我单击汉堡包以切换菜单时，它会打开，但会垂直显示内容而不是水平显示。

我在下面包含了导航代码。和以前一样。在这一点上，我无法确定问题是否出在 ng-bootstrap、bootstrap 4 或其组合上。

我的理想结果是菜单只在屏幕小于一定尺寸时出现，就像过去一样。

我确实看到了 Bootstrap4 navbar always collapsed。我已经打开了这个问题，因为它不包括 ng-bootstrap.

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top" style="background-color: white">
  <button class="navbar-toggler navbar-toggler-right" 
    type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" 
    aria-controls="exCollapsingNavbar2"
    data-toggle="collapse"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Vesalius - Bobby's World</a>
  <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="exCollapsingNavbar2">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link" routerLink="/provider/portal/" routerLinkActive="active">Schedule</a>
      <a class="nav-item nav-link" routerLink="/patient/portal/medical-history" routerLinkActive="active">Form Editor</a>
    </div>

    <div class="navbar-nav">
      <form class="form-inline">
        <input class="form-control mr-sm-2" type="text" placeholder="Search Patient">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Answer 1

Bootstrap 5（2021 年更新）

如文档中所述，

"Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing"

因此，Bootstrap 5 Navbar 与 Bootstrap 4 Navbar 相同，如果不包括 navbar-expand-*

，将垂直“折叠”

Bootstrap 4（原答案）

在Bootstrap4中，如果要水平展开导航栏，需要navbar-expand*class，否则默认mobile/collapsed版本。因此，不包括 navbar-expand* class 会使导航栏始终折叠。

查看这些navbar breakpoint examples

从 Bootstrap 4 beta 开始，navbar-toggleable-* classes 已更改为 navbar-expand-*。在您的情况下 navbar-toggleable-sm 将更改为 navbar-expand-md。

为什么 Bootstrap 导航栏总是折叠？

Why is the Bootstrap Navbar always collapsed?

twitter-bootstrap

bootstrap-4

ng-bootstrap

bootstrap-5