html - 隐藏小屏幕中的菜单项和下拉菜单 Bootstrap 3

Question

使用 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>

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

Answer 1

如果你想在手机上折叠时隐藏元素，请添加类 hidden-xs(例如 hidden on extra small)

<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 上有一些方便的示例，说明您可以使用哪些类来显示/隐藏不同设备的不同内容。