引导程序中的导航元素居中

Centering navigation elements in bootstrap

本文关键字：元素 引导程序 导航      更新时间：2023-09-26

我在其他主题中搜索了这个问题，但没有一个答案对我有效。我有一个导航，它应该以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;
}

谢谢你的帮助。

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

 <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>
相关文章：