Question

我无法识别引导程序导航栏约定，并且无法将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>

中心自举导航栏

3 个答案: