Bootstrap 3导航栏中的对齐菜单[重复]

Question

我无法使用常规的 text-align:justify 和 display: inline-block 来证明 bootstrap 3 中的菜单是合理的，但在没有 bootstrap 的网站上一切正常。

1. 没有引导程序的站点 (http://shop.staceydogs.ru)。菜单结构如下：

   .sd-menu
   — ul
   — — li
   — — li
   ...
   — — li
   — — ul:after
   

还有这种风格：

.sd-menu {
  width: 100%;
}
.sd-menu ul {
  list-style: none;
  text-align: justify;
}
.sd-menu ul li {
  display: inline-block;
}
.sd-menu ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

一切都很好！

1. 带有引导程序的站点 (http://dogs.fuksman.ru)。菜单结构如下：

   .navbar
   — ul.navbar-nav
   — — li
   — — li
   ...
   — — li
   — — .navbar-nav:after
   

还有这种风格（只显示非标准的引导风格）：

.navbar-nav {
  text-align: justify;
  > li {
    display: inline-block;
  }
}
.navbar-nav:after {
  content: '';
  width: 100%;
  display: inline-block;
}

而且它不起作用！你能帮帮我吗？

Answer 1

您可以尝试将navbar-nav 替换为nav-justified：

<ul class="nav nav-justified">
  <li><a href="/news">Новости</a></li>
  <li><a href="/video">Видео</a></li>
  <li><a href="/texts">Тексты</a></li>
  <li><a href="/photo">Фото</a></li>
  <li><a href="/about">О группе</a></li>
  <li><a href="/music">Купить музыку</a></li>
  <li><a href="http://shop.staceydogs.ru/">Магазин</a></li>
</ul>

Bootstrap 内置 nav-justified 的示例可以在这里找到：http://getbootstrap.com/examples/justified-nav/

OT：您的元素中似乎有不必要的与 navbar 相关的类。例如

<header class="nav navbar navbar-default navbar-static-top" role="navigation">

我建议您检查示例的源代码并相应地修复您的标记。