Bootstrap3:导航栏上的中心导航链接忽略品牌形象

Question

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

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

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

有谁知道如何将它们在页面上居中或放入 100px 偏移量？

下面是演示该问题的示例。

Answer 1

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

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

  这里的例子

  @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的子元素居中。

  这里的例子

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

---

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

  这里的例子

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

---

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

  这里的例子

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