Bootstrap導航欄：左元素的寬度影響中心元素的位置

我是新手引導3.此刻我想將我的導航欄對齊中心。我用這個approach做了這個，效果很好。
現在我的問題是，我的navbar品牌元素的寬度影響居中東西的位置，例如。如果品牌變大，元素會向左移動。有沒有辦法將導航欄的元素定位在屏幕的「真實」中心？
它看起來像此刻：但我想在這樣的屏幕上真正的中心，但隨着品牌： Bootstrap導航欄：左元素的寬度影響中心元素的位置

我的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; 
 
    } 
 
}

感謝您的幫助！

來源

2017-04-15 Alexander Pilz

這是一個很好的問題。這是[也是Bootstrap 4中的問題]（http://stackoverflow.com/questions/42539701/center-navbar-links-without-brand-logo-pushing-it-to-the-right-in-bootstrap-4/42540052），因爲flexbox居中工作的方式。 – ZimSystem

使navbarbrand的根元素具有絕對位置似乎給出了預期的效果。這會導致您的導航鏈接居中，而不考慮navbarbrand元素。注意：如果您的「品牌」文字長度變得太長，則會與導航鏈接重疊。 https://jsbin.com/juyanijeku/edit?output

.navbar-header { 
    position: absolute; 
}

來源

2017-04-15 14:38:34 pbarrasso

這與我想要的完全相同。非常感謝你！ –

我已經試過這樣的事情

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>

來源

2017-04-15 14:51:42

Bootstrap導航欄：左元素的寬度影響中心元素的位置

回答

相關問題