Bootstrap 3：导航栏上的中心导航链接忽略品牌形象

Question

我试图让我的导航链接以我的导航栏为中心。我走到这一步：

@media (min-width: 768px){
.navbar-nav{
    float:none;
    margin: 0 auto;
    display: table;
    table-layout: fixed;
 }
}

从链接现在居中的意义上说，这很好用。但是，它们不在页面上居中 - 它们在品牌形象使用的 100px 之后居中。

有谁知道如何使它们在页面上居中或偏移 100 像素？

这里an example演示了这个问题。

Answer 1

有几种不同的方法可以做到这一点。这里有 4 种不同的方法：

• 绝对定位 .header，从而将其从流中移除。换句话说，.navbar将不再考虑它。

  Example Here

  @media (min-width: 768px) {
      .navbar-header {
          position: absolute;
      }
      .navbar {
          text-align: center;
      }
      .navbar-nav {
          float: none;
          display: inline-block;
          vertical-align: top;
      }
  }
  

---

• 绝对定位#navbar（将其从流程中取出），并使用text-align: center居中子元素现在是inline-block.

  Example Here

  @media (min-width: 768px) {
      #navbar {
          position: absolute;
          left: 0; right: 0;
          text-align: center;
      }
      .navbar-nav {
          float: none;
          display: inline-block;
      }
  }
  

---

• 与前面的方法类似，只是居中形式不同。

  Example Here

  @media (min-width: 768px) {
      #navbar {
          position: absolute;
          left: 0; right: 0;
      }
      .navbar-nav {
          float: none;
          margin: 0 auto;
          display: table;
          table-layout: fixed;
      }
  }
  

---

• 这是另一种有趣的元素居中方法。

  Example Here

  @media (min-width: 768px) {
      .navbar-nav {
          transform: translateX(-50%);
          left: 50%;
          position: absolute;
      }
  }