在小屏幕中隐藏菜单项，并下拉菜单引导 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(例如隐藏在超小号上)

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

仅供参考，有一些方便的示例，说明您可以使用哪些类来显示/隐藏不同设备的不同内容 引导网站@ http://getbootstrap.com/css/#responsive-utilities

Answer 2

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