移除移动断点内的切换

Question

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

我的导航栏设置类似于我们在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/

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

Answer 2

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