Css 从折叠的Bootsrap中排除菜单项

我见过几个与此相关的问题，但似乎没有一个能解决我的问题。我想排除某些菜单项在移动设备上折叠的可能性。特别是本例中的“用户名”项。我已经设法让它工作（一般），但在手机上时，左边的空白消失了。有什么解决办法吗

这是我的密码：

   <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类不会给屏幕阅读器带来任何混乱吗？或者css类与此无关？另外，bootstrap是否可以拥有多个navbar品牌？谢谢

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