从折叠 Bootstrap 中排除菜单项

我看到了几个与此相关的问题，但似乎没有一个能解决我的问题。我想排除某些菜单项在移动设备上折叠时的情况。特别是本例中的“用户名”项。我已经设法让它工作（马马虎虎），但是在移动设备上左边距消失了。有什么解决办法吗？

这是我的代码：

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

Thanks!

Use navbar-brand相反，它将在移动设备上正确对齐。

http://www.codeply.com/go/CM2sytawRI 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>