移除移动断点内的开关

remove toggle within mobile breakpoint

本文关键字：开关 断点 移动      更新时间：2023-09-26

希望有人能帮忙。

我有一个导航栏设置类似于那些我们看到的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/

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

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

相关文章：