css - Twitter Bootstrap - 响应两行时居中导航栏

Question

我有一个带有一堆下拉菜单的导航栏。当导航栏位于一排(全尺寸屏幕)时，我将其居中。当屏幕尺寸较小时，我成功地将它折叠成一个居中的按钮。但是，当屏幕尺寸为中等且导航栏位于两行时，两行都不会居中。我该如何解决这个问题？

这是 jsFiddle:http://jsfiddle.net/grzt/US2sS/

您可以调整 jsFiddle 右下框架的大小，以查看我上面提到的不同屏幕尺寸结果。

HTML:

<nav class="navbar navbar-inverse">
  <div class="container-fluid" style="text-align: center;">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-navbar-collapse" id="navigation-collapse-btn">
      <div id="navigation-collapse-text">Navigation</div>        
        <span class="sr-only">Toggle navigation</span>
      </button>


            <div class="collapse navbar-collapse" id="navigation-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding-left: 0;">Some Words <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Words <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Words <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Words <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Words <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Words <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Words <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a></li>
                        </ul>                   
                    </li>
                </ul>
        </div>
  </div>
</nav>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

CSS:

.navbar-nav {
  /*center navbar inner elements*/    
  display: inline-block;
  float: none;
}

.navbar-toggle 
{
  /*center collapse button*/
  float:none;
}

Answer 1

如果你想让菜单居中，请避免使用 float 。检查是否this帮助你。

@media (min-width: 768px) {
    .navbar-nav>li {
    float: none;
    display: inline-block;
    }
}