在小屏幕中隐藏菜单项和下拉菜单 Bootstrap 3答案

【问题标题】：Hide menu items in small screen AND drop down menu Bootstrap 3在小屏幕中隐藏菜单项和下拉菜单 Bootstrap 3
【发布时间】：2017-04-25 03:06:34
【问题描述】：

使用 Bootstrap 3，我可以在调整屏幕大小时隐藏两个菜单项，如下面的代码示例所示。问题是当屏幕被调整为较小的尺寸时，这些项目仍将显示在出现的下拉菜单中（在左上角，带有三个栏）。有没有办法让它们也隐藏在那里？

<div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
         <li> <a id="mobileTab">Start</a></li>
         <li> <a id="mobilityActivityTab" href="#">Tasks</a></li>
         <li class="hidden-sm"> <a id="activityTab">Activity</a></li>
         <li class="hidden-sm"> <a id="clientAcctTab">Accounts</a></li>
     </ul>
     @Html.Partial("_LoginPartial")
</div>

注意：为简单起见，我删除了一些代码。

【问题讨论】：

标签： html css twitter-bootstrap asp.net-mvc-5

【解决方案1】：

如果您想在手机上折叠时隐藏项目，请添加 hidden-xs 类（例如隐藏在超小号上）

<div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
         <li> <a id="mobileTab">Start</a></li>
         <li> <a id="mobilityActivityTab" href="#">Tasks</a></li>
         <li class="hidden-xs hidden-sm"> <a id="activityTab">Activity</a></li>
         <li class="hidden-xs hidden-sm"> <a id="clientAcctTab">Accounts</a></li>
     </ul>
     @Html.Partial("_LoginPartial")
</div>

仅供参考，在 Bootstrap 网站 @http://getbootstrap.com/css/#responsive-utilities

【讨论】：

【解决方案2】：

在所有hidden-sm之前添加hidden-xs

【讨论】：