Question

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

没有引导程序的站点（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%;
}

一切都很棒！

带引导程序的站点（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相关的类。 E.g。

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

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

Bootstrap 3导航栏中的对齐菜单

1 个答案: