css - 在保留样式的同时居中 Bootstrap 导航栏

Question

如何让导航栏在 this page 上居中？ ，同时仍然保持背景渐变？ I've seen some tricks其中 li 设置为显示 inline，a 设置为显示 inline-block， ul 将文本居中对齐，但是这些要求我将 float:none 添加到代码中，这会破坏我的背景渐变。有人可以解释一下吗？

Answer 1

在标记中添加两个类(带有可选名称，只是为了覆盖 CSS)。我们称它为 .nav-container 和 .menu-nav。

      <div class="navbar-inner">
        <div class="container nav-container">
          <ul class="nav menu-nav">
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
          </ul>
        </div>
      </div>

然后在CSS中添加

.nav-container {
    text-align: center;
}

.menu-nav {
    float: none;
}

我已经在我的 Chrome 检查器中更改了它，背景渐变看起来和以前一样。