Bootstrap navbar: 左侧元素的宽度影响元素在中心的位置

Question

我是 bootstrap 的新手 3. 目前我想将导航栏对齐到中心。我用这个 approach 做了这个，效果很好。
现在我的问题是我的 navbar-brand 元素的宽度会影响居中内容的位置，例如如果品牌变大，元素会向左移动。有没有办法将导航栏的元素定位在屏幕的 "real" 中心？
目前看起来是这样的：但我想要像那样在屏幕的真正中心，但带有品牌：

我的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 元素。注意：如果您的 'brand' 文本长度太长，它将与导航链接重叠。 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>

Bootstrap navbar: 左侧元素的宽度影响元素在中心的位置

Bootstrap navbar: Width of left element affects position of element in the center

html

css

center

twitter-bootstrap