html - Bootstrap 导航栏 : Width of left element affects position of element in the center

Question

我是 bootstrap 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;
}