Question

我已经看到了几个与此相关的问题，但似乎都没有解决我的问题。我想在移动设备上排除某些菜单项崩溃。特别是＆＃34;用户名＆＃34;此示例中的项目。我设法让它工作（马马虎虎），但在移动设备上左边距消失了。任何解决方案吗？

这是我的代码：

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

谢谢！

Answer 1

使用navbar-brand代替手机上的正确对齐方式。

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中排除菜单项

1 个答案: