javascript - 在 Bootstrap 中居中导航元素

Question

我在其他主题中搜索了该问题，但给出的答案均不适合我。我有一个导航，它应该以 Menu1-Menu4 为中心，Menu5 在导航的右侧。

https://jsfiddle.net/tbvcc6bj/

    <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Logo</a>
        </div>

        <div class="navbar-inner">
          <ul class="nav navbar-nav">
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
            <li><a href="#">Menu4</a></li>
            <li class="pull-right"><a href="#">Menu5</a></li>
          </ul>
        </div>
    </div>
</nav>

.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

 .navbar-inner {
    text-align:center;
}

感谢您的帮助。

Answer 1

您可以尝试以下方法在右侧获取一些菜单项

 <div class="navbar-collapse collapse" collapse="navbarProperties.isCollapsed">
            <ul class="nav navbar-nav">
                <li><a href="#/routeOne">Route One</a></li>
                <li><a href="#/routeTwo">Route Two</a></li>
                <li><a href="#/routeThree">Route Three</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/login">Login</a></li>
                <li><a href="#/register">Register</a></li>
            </ul>
        </div>