修改twitter bootstrap导航栏

我一直试图修改twitter bootstrap导航栏，此刻所有链接都对齐到左边，当我真正喜欢的是将它们置于中心位置时。

在另一篇文章中我读到你使用它

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

但这对我不起作用

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

任何帮助赞赏

这是我的标记

布局/应用

 
 
 
      Newbridges  
 
  
  
 
  
  

我也尝试过这个

 .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的菜单项来居中导航菜单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类}

 
 
 .... 
  

然后你可以像这样定位.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/

Answer 2

我知道这是一个很老的post，但我在google搜索时也注意到了这个post。 我想实际设置记录直接将导航栏置于twitter bootstrap中，因为当前接受的方法没有错，但不需要，因为twitter bootstrap支持这一点。

实际上有一种更好的方法可以手动修改它。 这将通过使用twitter bootstrap中已有的内容来减少代码。

 
 
 
 RIZEN 
 
Home
 
Events
 
Links
 
Gallery
 
Contact
 
Forums
 
 
 
  

分解
第一行非常简单，因为我们正在创建导航栏，将其设置为视口上的固定位置到顶部，然后通过反转颜色主题将白色交换为黑色。

接下来我们将分配navbar-inner，或多或少说，如果可能的话，设置最小高度，这是实际颜色样式来自的地方，而不是上面的行。

这是重要的一行，因为我们正在删除导航栏的流体布局，只使用容器。 这设置了一个固定的边距，中心将内部内容与屏幕对齐。 这是通过自动边距和设置宽度来完成的。

通过不添加额外的代码并使用twitter引导程序正确使用脚手架并且没有额外的代码膨胀，此方法将执行您想要的实际保存kb的头请求。 我在我自己的项目中使用了这种方法，并继续在我当前的项目中使用它。 修改TBS（Twitter引导程序）的危险在于您丢失了代码一致性，如果将来您想要更改内容，则必须记下您已更改的内容，否则事情可能无法按预期工作。

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

Answer 3

啊，而且，如果您希望两侧的空间（在“项目名称”之前和“下拉”之后）是对称的，请添加以下内容：

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

此外，似乎使用以下（从Bootstrap v2.0.4开始）不会使导航栏居中：

 
 
 
 . . . 
 
  

你需要改为

 
 
 
 . . . 
 
  

（摘自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测试）