Question

我一直试图修改twitter bootstrap导航栏，目前所有的链接都在左边，当我真正喜欢的是将它们放在中央时。

在另一篇文章中，我读到你使用了这个

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

但这对我不起作用

我需要在css中更改以实现此目的，我理解我将修改后的CSS放在引导程序和覆盖中。

任何帮助表示赞赏

这是我的标记

布局/应用

<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;
}

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;
}

虽然我建议您创建自己的类来定位您希望居中的导航栏菜单，但这样您就不会打扰引导程序默认值并弄乱页面中可能包含的其他导航部分。你可以这样做：

^{注意导航栏容器中的.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; }类。

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

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

修改：忘记将子菜单项重新对齐到左侧，这是修复：

<强> CSS

{{1}}

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

Answer 2

我知道这是一个很老的帖子，但我也在google搜索过几次这篇帖子。我想实际设置记录直接在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引导程序正确使用脚手架并且没有额外的代码膨胀，此方法将执行您想要的实际保存kb的头请求。我在自己的项目中使用了这种方法，并继续在我当前的项目中使用它。修改TBS（Twitter引导程序）的危险在于您丢失了代码一致性，如果将来您想要更改内容，则必须记下您已更改的内容，否则事情可能无法按预期工作。

希望这会有所帮助。此外，如果你想要一个工作示例，只需查看twitter bootstrap的主页就可以了。

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提供的样本;只是他错过了改变）

现在它对我有用......

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测试）

修改twitter bootstrap导航栏

4 个答案: