为什么 Bootstrap 导航栏总是折叠起来? [英] Why is the Bootstrap Navbar always collapsed?

问题描述

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

我在下面包含了导航的代码.它和以前一样.在这一点上，我无法弄清楚问题是否出在 ng-bootstrap、bootstrap 4 或它们的组合上.

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

我确实看到

解决方案

Bootstrap 5(2021 年更新)

如文档中所述，

<块引用>

"Navbars 需要一个包装 .navbar.navbar-expand{-sm|-md|-lg|-xl|-xxl} 用于响应式折叠"

因此，Bootstrap 5 Navbar 与 Bootstrap 4 Navbar 相同，会垂直折叠"；如果你不包括 navbar-expand-*

引导程序 4(原始答案)

在 Bootstrap 4 中，如果您希望导航栏水平扩展，则需要 navbar-expand* 类，否则默认为移动/折叠版本.因此，不包括 navbar-expand* 类会使导航栏总是折叠起来.

查看这些导航栏断点示例

自 Bootstrap 4 测试版起，navbar-toggleable-* 类已更改为 navbar-expand-*.在您的情况下，navbar-toggleable-sm 将更改为 navbar-expand-md.

I updated to the v1.0-beta of ng-bootstrap. Now the navbar is always collaped. When I click on the hamburger to toggle the menu, it opens, but displays the contents vertically rather than horizontally.

I've included the code for the nav below. It's the same as it before. At this point I can't tease out if the issue lies with ng-bootstrap, bootstrap 4 or a combination thereof.

My ideal outcome is for the menu to only appear once the screen is under a certain size, like in the old days.

I did see Bootstrap4 navbar always collapsed. I've opened this question since it did not include 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>

解决方案

Bootstrap 5 (update 2021)

As stated in the docs,

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

Therefore, Bootstrap 5 Navbar is the same as the Bootstrap 4 Navbar and will be vertically "collapse" if you don't include navbar-expand-*

Bootstrap 4 (original answer)

In Bootstrap 4, the navbar-expand* class is needed if you want the navbar to expand horizontally, otherwise it defaults to the mobile/collapsed version. Therefore, not including the navbar-expand* class makes the Navbar always collapsed.

See these navbar breakpoint examples

As of Bootstrap 4 beta, the navbar-toggleable-* classes have changed to navbar-expand-*. In your case navbar-toggleable-sm would change to navbar-expand-md.

这篇关于为什么 Bootstrap 导航栏总是折叠起来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！