带有 3 列的 Bootstrap 3 导航栏。左侧为徽标，中心为菜单，右侧为社交图标

Question

似乎默认的引导导航栏无法生成这种导航栏。

分别是左、中、右。

当我想使菜单居中时，问题就来了。对于左右导航栏我应该没问题。

我在stackoverflow中尝试了一些示例，菜单居中，但它会将导航栏推到底部。

请指教我该怎么办？

附上截图：-

我想让菜单在品牌（红色框）和右侧社交图标之间居中。

请在下面找到我的 jsfiddle：-

http://jsfiddle.net/t5644/3/

以下是我的代码：-

.navbar-default {
  background-color: white;
  border-color: white;
  margin: 0; }
  .navbar-default .navbar-brand {
    color: black;
    padding-left: 35px; }
    .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
      color: black; }
  .navbar-default .navbar-text {
    color: black; }
  .navbar-default .navbar-nav > li > a {
    font-family: "FuturaStd-Light";
    font-size: 13px;
    line-height: 40px;
    color: black; }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
      color: black; }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: black;
    background-color: white; }
  .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: black;
    background-color: white; }
  .navbar-default .navbar-toggle {
    border-color: white; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
      background-color: white; }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: black; }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border: none; }
  .navbar-default .navbar-link {
    color: black; }
    .navbar-default .navbar-link:hover {
      color: black; }
  .navbar-default .navbar-right {
    padding-right: 35px; }
    .navbar-default .navbar-right .icon {
      color: #c1c0c0;
      font-size: 18px;
      margin-left: 30px;
      padding-top: 25px; }
  .navbar-default .dropdown-menu > li > a {
    font-family: "FuturaStd-Light";
    font-size: 13px;
    padding: 15px; }
  .navbar-default .navbar-center {
    margin: 0 auto; }

@media (min-width: 768px) {
  .navbar-nav > li > .dropdown-menu {
    margin-top: -10px; }

  .dropdown-menu-bar {
    height: 5px;
    background: #ff6319;
    margin-top: -25px;
    box-shadow: none !important; } }
@media (max-width: 767px) {
  .navbar-default {
    margin-bottom: 20px; }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: black; }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
      color: black; }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: black;
    background-color: white; }

<nav role="navigation" class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#ricecomms-nav" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar">&nbsp;</span>
                <span class="icon-bar">&nbsp;</span>
                <span class="icon-bar">&nbsp;</span>
            </button>
            <a href="#" class="navbar-brand">
                <img src="/media/img/header-logo.png" />
            </a>
        </div>

        <div class="collapse navbar-collapse" id="ricecomms-nav">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">ABOUT US</a>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">INDUSTRIES</a>
                    <ul class="dropdown-menu">
                        <div class="dropdown-menu-triangle hidden-xs">
                            &nbsp;
                        </div>
                        <div class="dropdown-menu-bar hidden-xs">&nbsp;</div>
                        <li>
                            <a href="#">Technology</a>
                        </li>
                        <li>
                            <a href="#">Corporate</a>
                        </li>
                        <li>
                            <a href="#">Consumer</a>
                        </li>
                        <li>
                            <a href="#">Professional Services</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">SERVICES</a>
                </li>
                <li>
                    <a href="#">INSIGHTS</a>
                </li>
                <li>
                    <a href="#">CAREERS</a>
                </li>
                <li>
                    <a href="#">CONTACT US</a>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <i class="icon ion-social-facebook">&nbsp;</i>
                </li>
                <li>
                    <i class="icon ion-social-twitter">&nbsp;</i>
                </li>
                <li>
                    <i class="icon ion-social-linkedin">&nbsp;</i>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

这对我有用

.navbar-nav {
    float: left;
    margin: 0;
    margin-left: 40%; 
}

.navbar-nav.navbar-right:last-child {
    margin-right: -15px;
    margin-left: 0;
}

margin-left 针对每种情况进行调整，更多信息请转至Bootstrap 3: Align navigation to center

Answer 2

试试这个：

希望这可能会有所帮助：

        @media (max-width: 767px) {
        .navbar-nav {
    float: left;
    margin: 0;
    margin-left: 40%; 
}

            .navbar-nav.navbar-right:last-child {
                margin-right: -15px;
            }
        }