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导航栏：左元素的宽度影响中心元素的位置

回答

相关问题