为啥 Bootstrap Navbar 总是折叠? [复制]
Posted
技术标签:
【中文标题】为啥 Bootstrap Navbar 总是折叠? [复制]【英文标题】:Why is the Bootstrap Navbar always collapsed? [duplicate]为什么 Bootstrap Navbar 总是折叠? [复制] 【发布时间】:2018-02-08 06:26:34 【问题描述】:我更新到 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>
【问题讨论】:
【参考方案1】:引导程序 5(2021 年更新)
如文档中所述,
"导航栏需要一个包装的 .navbar .navbar-expand-sm|-md|-lg|-xl|-xxl 用于响应式折叠"
因此,Bootstrap 5 Navbar 与 Bootstrap 4 Navbar 相同,如果不包含navbar-expand-*
,则会垂直“折叠”
Bootstrap 4(原始答案)
在 Bootstrap 4 中,如果您希望导航栏水平扩展,则需要 navbar-expand*
类,否则默认为移动/折叠版本。因此,不包括 navbar-expand*
类会使导航栏总是折叠。
看到这些navbar breakpoint examples
从 Bootstrap 4 测试版开始,navbar-toggleable-*
类已更改为 navbar-expand-*
。在您的情况下,navbar-toggleable-sm
将更改为 navbar-expand-md
。
【讨论】:
以上是关于为啥 Bootstrap Navbar 总是折叠? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
具有多个拆分导航的 Bootstrap 4 Navbar 不会折叠
Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单