如何将这些 Twitter bootstrap 3 导航栏链接居中？

Posted 2023-03-06

【中文标题】如何将这些 Twitter bootstrap 3 导航栏链接居中？

【英文标题】：How do I center these Twitter bootstrap 3 navbar links?

【发布时间】：2013-08-13 01:25:12

【问题描述】：

我想知道如何使 bootstrap 3 的导航栏菜单项居中。我知道他们已经包含了一个.nav-justified 类，但如果一起使用，那只会与navbar-nav 冲突。我相信开发团队正在调查它。

那么有什么办法可以使用 CSS 来实现一个导航栏，即使它所在的容器被重新调整大小，它也能保持导航栏菜单项/链接的合理性。

如果您需要，这里有一个Jsfiddle。

【参考方案1】：

.nav-justifed 类将与nav-tabs / nav-pills 一起使用（请参阅bootstrap docs）而不是nav-bar。这两个概念非常不同，不应混淆。

但是，你可以通过添加以下css来达到你想要的效果：

.navbar-nav.nav-justified > li
    float:none;

nav-justifiednow 与navbar-nav 配合得很好：

<ul class="nav navbar-nav nav-justified">

见updated jsFiddle。

【参考方案2】：

如果使用 LESS，您可以执行以下操作：

.navbar-nav 
  .nav-justified;

【讨论】：

对于使用较少的人来说是完美的答案。 +1