从折叠的Bootsrap中排除菜单项 [英] Exclude menu item from collapsing Bootsrap

问题描述

我已经看到了几个与此相关的问题，但是似乎没有一个问题可以解决我的问题。我想在移动时避免某些菜单项崩溃。在此示例中，特别是用户名项。我设法使其正常工作，但是在移动设备上时，左边距消失了。对此有任何解决方案吗？

I have seen several questions related to this, but none seemed to solve my problem. I want to exclude some menu items from collapsing when on mobile. Specifically the "User Name" item in this example. I have managed to get it working (so-so), but the left margin disappears when on mobile. Any solutions to this?

这是我的代码：

   <nav role="navigation" class="navbar navbar-default">

        <div class="navbar-header">

            <ul class="nav navbar-nav pull-left">

            <li> <a href="#"> User Name </a> </li>

            </ul>


            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>

        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"> <a href="#" data-toggle="collapse" data-target="#navbarCollapse">Home</a></li>
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Profile</a></li>
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Messages</a></li>
                <li class="visible-xs" ><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Contact Us</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Login</a></li>
            </ul>
        </div>
    </nav>

谢谢！

推荐答案

使用 navbar-brand 代替，这样可以在移动设备上正确对齐。

Use navbar-brand instead which will have the proper alignment on mobile..

< a href = http://www.codeply.com/go/CM2sytawRI rel = nofollow noreferrer> http://www.codeply.com/go/CM2sytawRI

<nav role="navigation" class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand"><a class="" href="#"> User Name </a></div>
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"> <a href="#" data-toggle="collapse" data-target="#navbarCollapse">Home</a></li>
            <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Profile</a></li>
            <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Messages</a></li>
            <li class="visible-xs"><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Contact Us</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Login</a></li>
        </ul>
    </div>
</nav>

这篇关于从折叠的Bootsrap中排除菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！