ブートストラップナビバー：左の要素の幅が中央の要素の位置に影響を与えます

Question

私はブートストラップ3の新機能です。現時点では、ナビゲーションバーを中央に配置したいと思います。私はこれをapproachで行いました。これは問題なく動作します。
私のnavbar-brand要素の幅は、中央に配置されたものの位置に影響します。ブランディングが大きくなると、要素は左に移動します。ナビゲーションバーの要素を画面の「本当の」中心に配置する方法はありますか？
それは現時点ではそのようになっています

私のHTML：：

<nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand navbar-left" href="#"></a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Stuff</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#about">Karriere</a></li> 
 
      <li><a href="#contact">Über uns</a></li> 
 
      <li><a href="#contact">Kontakt</a></li>    
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav>

しかし、私はそのような画面の本当の中心にしたいが、ブランドと私のCSS：

@media (min-width: $grid-float-breakpoint) { 
 
    .navbar .navbar-nav { 
 
     display: inline-block; 
 
     float: none; 
 
     vertical-align: top; 
 
    } 
 

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

ありがとうございます！

Answer 1

navbarbrandのルート要素を作成すると、絶対的な位置が望ましい効果をもたらすようです。これにより、navbarbrand要素に関係なく、ナビゲーションリンクが中央に配置されます。注： 'ブランド'のテキストの長さが長すぎる場合、それはナビゲーションリンクに重なります。 https://jsbin.com/juyanijeku/edit?output

.navbar-header { 
    position: absolute; 
} 

Answer 2

私はこの

a.navbar-brand { 
 
    display: block; 
 
    float: none; 
 
    text-align: center !important; 
 
} 
 

 
.nav> li { 
 
display:inline-block !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header text-center"> 
 
      
 
      <a class="navbar-brand" href="#"> 
 
      Brand 
 
      </a> 
 
     </div> 
 
     <div id="navbar"> 
 
      <ul class="nav navbar-nav text-center"> 
 
      
 
      <li><a href="#about">Karriere</a></li> 
 
      <li><a href="#contact">Über uns</a></li> 
 
      <li><a href="#contact">Kontakt</a></li>    
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav>