bootstrap响应式导航栏，并居中

你可以使用以下代码来创建一个响应式导航栏，并将其居中：

HTML代码：

<nav class="navbar navbar-default navbar-centered">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS代码：

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

.navbar-centered .navbar-collapse {
  text-align: center;
}

@media (min-width: 768px) {
  .navbar-centered .navbar-nav {
    float: none;
    display: table-cell;
    vertical-align: top;
  }

  .navbar-centered .navbar-header {
    display: table-cell;
    width: 1%;
  }

  .navbar-centered .navbar-collapse {
    display: inline-block;
    text-align: center;
    width: 100%;
  }
}

解释：

- 通过将 .navbar-nav 的 display 属性设置为 inline-block 和 float 属性设置为 none，来使导航菜单水平排列，并具有自适应宽度；
- 通过将 .navbar-collapse 的 text-align 属性设置为 center，使导航菜单居中；
- 通过使用媒体查询来处理大屏幕情况下的样式：将 .navbar-nav 的 display 属性设置为 table-cell，并使用 vertical-align 属性使其垂直居中；将 .navbar-header 的 display 属性设置为 table-cell，width 属性设置为 1%，防止它占据过多空间；将 .navbar-collapse 的 display 属性设置为 inline-block，并设置其宽度为100%。