Question

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

我的HTML：

＆＃13;

    <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>

＆＃13;

＆＃13; 我的CSS：

＆＃13;

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

＆＃13;

＆＃13; 谢谢你的帮助！

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>

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

2 个答案: