twitter-bootstrap 为什么 Bootstrap 4 导航栏总是折叠起来？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45962115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is the Bootstrap 4 Navbar always collapsed?
提问by Virmundi
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.
我更新到 ng-bootstrap 的 v1.0-beta。现在导航栏总是折叠起来。当我点击汉堡来切换菜单时，它会打开，但会垂直而不是水平显示内容。
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.
我在下面包含了导航的代码。它和以前一样。在这一点上，我无法弄清楚问题是否出在 ng-bootstrap、bootstrap 4 或它们的组合上。
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.
我确实看到Bootstrap4 导航栏总是崩溃。我已经打开了这个问题，因为它不包括 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>
回答by Zim
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 alwayscollapsed.
在 Bootstrap 4 中，navbar-expand*如果您希望导航栏水平扩展，则需要该类，否则默认为移动/折叠版本。因此，不包括navbar-expand*类会使导航栏始终折叠。
See these navbar breakpoint examples
查看这些导航栏断点示例
As of Bootstrap 4 beta, the navbar-toggleable-*classes have changed to navbar-expand-*. In your case navbar-toggleable-smwould change to navbar-expand-md.
自 Bootstrap 4 测试版起，这些navbar-toggleable-*类已更改为navbar-expand-*. 在您的情况下navbar-toggleable-sm会更改为navbar-expand-md.
