Bootstrap：根据页面不同的菜单类型答案

【问题标题】：Bootstrap: Different menu type depending on pageBootstrap：根据页面不同的菜单类型
【发布时间】：2017-07-31 06:13:28
【问题描述】：

是否可以在一个页面（例如：主页）上有一个常规文本菜单，而在所有其他页面上有一个移动（“汉堡”）菜单，无论屏幕大小如何？

该逻辑如何在 Bootstrap 和/或 AngularJS 中发挥作用？

【问题讨论】：

【解决方案1】：

1) 你需要有 2 个菜单： (a) class="移动菜单" (b)class="桌面菜单"

您可以将主页添加到正文、html 或您拥有的任何上层包装器（class="home" 或类似的东西），而不是隐藏移动菜单以进行索引，而对于其他页面隐藏桌面菜单

所以你应该在 css 中有类似的东西

.home .mobile-menu{
display: none;
}

^这将仅对标记为主页的页面隐藏移动设备

.desktop-menu{
display: none;
}
.home .desktop-menu{
display: block;
}

【讨论】：

【解决方案2】：

是的，这是可能的，但您必须为这两个菜单编写代码。

对于引导正常菜单栏，只需添加类 hidden-xs hidden-sm 以便它隐藏在移动视图端口上

然后对于汉堡菜单只需添加类hidden-md hidden-lg hidden-xl 这将隐藏桌面和其他屏幕视口的汉堡

【讨论】：

我希望它在主页 (index.html) 上隐藏移动菜单，但在所有其他页面上显示移动菜单。屏幕大小无关紧要。目前“index.html”被用作其他页面的模板，因此它们没有标题部分。我将这些页面的内容与<div ng-view></div> 相匹配