修改 Twitter Bootstrap 导航栏

Question

我一直在尝试修改Twitter Bootstrap的导航栏，目前所有链接都靠左对齐，我真正想要的是将它们居中。

在另一个帖子中，我看到了使用以下方法：

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

但是这对我没有起作用。

我需要在CSS中做什么修改才能使它发生变化，我知道我需要把修改后的CSS放在Bootstrap和Overrides中。

非常感谢任何帮助。

这是我的标记

layouts/application

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

我也尝试了这个

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}
.nav {
  text-align: center;
}

- Richlewis

---

你能否制作一个 jsFiddle演示，展示一下你目前所拥有的Twitter Bootstrap导航栏？ - thirtydot

你是指像这个这样的东西吗？之前回答过类似的问题，可以在这里找到。 - Andres Ilich

谢谢您的建议，但似乎对我不起作用。 - Richlewis

@Richlewis 能否发布你的标记或演示，以便我们查看？ - Andres Ilich

@Richlewis 所以您正在尝试将所有 .nav 元素居中对齐？无法从您的标记中确定您要使用发布的CSS针对哪些内容。 - Andres Ilich

Answer 1

你可以通过将菜单项的 display 属性设置为 inline-block，而不是使用 float:left 来使你的导航菜单居中，代码如下：

.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

 .navbar-inner {
    text-align:center;
}

虽然我建议您创建自己的类来定位希望居中的导航栏菜单，这样您就不会干扰Bootstrap默认值并搞乱页面上可能有的其他导航部分。可以像这样操作：

^{请注意在导航栏容器中的.center类}

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

然后你可以这样定位到.center类：

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

示例： http://jsfiddle.net/C7LWm/show/

编辑: 忘记将子菜单项左对齐，以下是修复代码：

CSS

.center .dropdown-menu {
    text-align: left;
}

演示：http://jsfiddle.net/C7LWm/1/show/

- Andres Ilich

Answer 2

我知道这是一篇旧帖子，但在我的谷歌搜索中也多次注意到这篇帖子。我想为在Twitter Bootstrap中居中导航栏的实际设置记录正本，因为当前接受的方法不是错误的，但不需要，因为Twitter Bootstrap支持此功能。

实际上，有一种比手动修改更好的方法。这将通过使用已经存在于Twitter Bootstrap中的内容来减少代码。

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">RIZEN</a>
            <ul class="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forums</a></li>
            </ul>
        </div>
    </div>
</div>

分解
首先，我们要创建一个导航条，在视口顶部设置其固定位置，然后通过反转颜色主题将白色变为黑色，这一行非常简单。

接下来，我们将分配navbar-inner，更加具体的说，如果可能的话，设置最小高度，并从这里获取实际的颜色样式，而不是上面的那一行。

这一行非常重要，因为我们放弃了导航栏的流动布局，而是使用容器。这样可以设置一个带有边距的固定宽度，使内部内容在屏幕上居中对齐。这是通过自动边界和设置宽度来完成的。

这种方法会做你想做的事情，因为它实际上通过正确使用Twitter Bootstrap的脚手架而不添加额外的代码，并且不使用额外的代码膨胀来节省头部请求中的kb。我在我的项目中使用了这种方法，并在当前项目中继续使用它。修改TBS(Twitter Bootstrap)的危险在于失去了代码一致性，如果将来想要改变一些东西，就必须记住自己所做的修改，否则可能会出现意想不到的问题。

希望这可以帮助你。如果你想要一个可工作的示例，请查看Twitter Bootstrap的主页，因为它就是这样的。

- Phreak Nation

---

这对我有用，但我必须在容器上设置宽度才能使其工作。 - Sherlock

你根本不需要设置宽度。此外，这应该是针对Bootstrap 2的，以防你使用的是3，但我相信它应该是向前兼容的。 - Phreak Nation

Answer 3

另外，如果您希望在“项目名称”之前和“下拉菜单”之后的空格对称，请添加以下内容：

.navbar .nav, .navbar .nav > ul
{
    float: right
}

此外，似乎使用以下代码（截至Bootstrap v2.0.4）仍无法使导航栏居中：

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container-fluid">
        .
        .
        .
        </div>
      </div>
</div>

您需要将 更改为

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container">
        .
        .
        .
        </div>
      </div>
</div>

（从Andres llich提供的样本中提取；只是他错过了更改）

现在对我有用了...

- Gabriel

Answer 4

从上面的CSS可以看出，在未折叠的导航栏中，居中效果很好。

但是，当导航栏折叠时，这种效果并不理想。默认情况下，每个折叠的导航栏项目都位于自己的行，就像一个下拉菜单。但是上面的CSS会将所有折叠的项目挤到同一行，这并不是最理想的情况。

我使用了一个小修复方法，将居中的CSS包裹在媒体查询中，这样它只会在未折叠的导航栏中触发：

@media (min-width: 768px) {
    .center.navbar .nav,
    .center.navbar .nav > li {
        float:none;
        display:inline-block;
        *display:inline; /* ie7 fix */
        *zoom:1; /* hasLayout ie7 trigger */
        vertical-align: top;
    }
    .center .navbar-inner {
        text-align:center;
    }
}

（已经使用Bootstrap 3.1.1测试）

- terrymorse