为什么Bootstrap 4导航栏始终崩溃? [英] Why is the Bootstrap 4 Navbar always collapsed?
问题描述
我更新到了ng-bootstrap的v1.0-beta.现在,导航栏始终处于折叠状态.当我单击汉堡包切换菜单时,它会打开,但垂直显示内容而不是水平显示.
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,bootstrap 4还是它们的组合.
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.
我确实看到了 Bootstrap4导航栏始终折叠.我已经打开了这个问题,因为它不包含ng-bootstrap.
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 4中,如果希望导航栏水平扩展,则需要navbar-expand*
类,否则默认为移动/折叠版本.因此,不包含navbar-expand*
类会使导航栏始终折叠.
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.
请参阅以下导航栏断点示例
自Bootstrap 4 beta起,navbar-toggleable-*
类已更改为navbar-expand-*
.在您的情况下,navbar-toggleable-sm
将更改为navbar-expand-md
.
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 4导航栏始终崩溃?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!