删除移动断点内的切换答案

【问题标题】：remove toggle within mobile breakpoint删除移动断点内的切换
【发布时间】：2014-06-25 21:45:41
【问题描述】：

希望有人可以帮助解决这个问题。

我有一个导航栏设置，类似于我们在 GMail、Facebook 等上看到的导航栏，带有用户头像按钮，其中包含设置、帐户、注销等选项。我还拥有内嵌头像图标的主网站导航。

当在移动设备上查看屏幕时，导航栏会按原样折叠，但是我希望头像切换按钮消失，因此菜单如下所示：

<li><a href="#"><span class="glyphicon glyphicon-cloud-upload"></span> Upload</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Globe</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Favourite</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a></li>
<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>

这是小提琴：http://jsfiddle.net/Z5Txw/

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

将hidden-xs 类添加到您想要在导航栏折叠时隐藏的元素。更新小提琴：http://jsfiddle.net/Z5Txw/3/.

编辑： 我根据您的评论编辑了小提琴，添加了另一个带有 visible-xs 的 ul 以实现您想要的。现在看起来是这样的：

<!-- Visible when navbar is collapsed -->
<ul class="nav navbar-nav visible-xs">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a>
        </li>
        <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a>
        </li>
        <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
        </li>
    </ul>

    <!-- Visible when navbar isn't collapsed. -->
    <ul class="nav navbar-nav navbar-right hidden-xs">
        <li class="avatar-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="http://placehold.it/30x30" height="30px" class="img-circle avatar" alt="Avatar">
            </a>

            <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a>
                </li>
                <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a>
                </li>
                <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
                </li>
            </ul>
        </li>
    </ul>

【讨论】：

我仍然希望在移动设备上查看头像列表项（我、设置、编辑个人资料、注销）时显示，只是用户不必按下头像图标作为主导航栏并且头像选项列在一个菜单中（如果有意义的话）
嘿@JT1，我更新的答案现在符合您的需要吗？如果是这样，请考虑将其标记为已接受。

【解决方案2】：

您可以使用 hidden-xs 和 visible-xs 类来创建不同的菜单。主导航和头像导航菜单使用 hidden-xs，并使用 visible-xs 类为移动设备创建另一个菜单。像这样：jsfiddle.net/Z5Txw/2/

【讨论】：