首页 文章

为什么Bootstrap 4 Navbar总是崩溃? [重复]

提问于
浏览
13

这个问题在这里已有答案:

我更新到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>

enter image description here

1 回答

  • 34

    在Bootstrap 4中,如果希望导航栏水平扩展,则需要 navbar-expand* 类,否则默认为移动/折叠版本 . 因此,不包括 navbar-expand* 类会使Navbar始终崩溃 .

    看到这些navbar breakpoint examples

    截至Bootstrap 4 beta版, navbar-toggleable-* 类已更改为 navbar-expand-* . 在您的情况下 navbar-toggleable-sm 将更改为 navbar-expand-md .

相关问题