中央引導導航欄

Question

我無法識別引導導航欄約定，而且Im無法在導航欄的中間水平放置a標簽的文本。 似乎找不到與此匹配的示例

 <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Home</a>
          <a class="navbar-brand" href="#">About</a>
          <a class="navbar-brand" href="#">Values</a>
          <a class="navbar-brand" href="#">Safety</a>
          <a class="navbar-brand" href="#">Cities</a>
          <a class="navbar-brand" href="#">Login</a>
        </div>
    </div>
</nav>

這是我嘗試過的，但無濟於事。

 .navbar{
   text-align: center;
}

.navbar-header{
display: inline-block;
float: none;
 }

Answer 1

這是您的請求的jsfiddle ： JSfiddle

enter code here

Answer 2

只需移除float並重新對齊導航欄鏈接即可。 像這樣：

HTML：

<ul class="nav navbar-nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Forum</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>

CSS：

.navbar .navbar-nav {
      float: none !important;
      display: inline-block;
 }
 .navbar .navbar-collapse {
       text-align: center;
  }

Answer 3

像這樣，將鏈接括在列表中：

<ul class="nav navbar-nav">
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
</ul>