Bootstrap 导航对齐堆栈 li

Question

我想知道当我使用 nav-justified 时，是什么导致 li 元素相互堆叠。

我了解到 IE 旧版本存在问题，但我正在新版本上对其进行测试 Chrome。

<div id="header" class="row">
  <div id="backgroundImage" class="pagebg"></div>
  <div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">                     
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
        <span class="sr-only">toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="collapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav nav-justified">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Support</a></li>
      </ul>
    </div>
</div>

这是我第一个真正的 Bootstrap 网站，我知道还有很多东西要学。 Bootstrap 文档中没有关于该问题的任何内容。

有什么东西可以覆盖它吗？

我了解到在使用 nav-justified 时，safari 浏览器中存在一个错误。使用 nav-justified 是个坏主意吗？我应该使用 css 来操纵文本吗？或者是否有一个简单的解释说明为什么窃听并将所有内容堆叠在一起？

先谢谢你

Answer 1

从里面的<ul>元素中删除navbar-navclass

<div id="collapse" class="collapse navbar-collapse">...</div>

如果已设置，则以下 CSS 规则将应用于您的 <li> 元素：

@media (min-width: 768px)
    .navbar-nav > li {
        float: left;
    }
}

float: left 导致 "stack" 效果。

Answer 2

根据文档Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

如果不进一步 CSS 调整，nav-justified 仅适用于 nav-pills 和 nav-tabs，请尝试将 navbar-nav 更改为标签或药丸。

见http://jsfiddle.net/x3yz13c5/5/

如果你坚持使用 navbar-nav 试试

.navbar-nav > li {
    float: none;
}

可以在这里看到类似的线程How to justify navbar-nav in Bootstrap 3

Bootstrap 导航对齐堆栈 li

Bootstrap nav-justified stacks li

html

css

navigation

navbar

twitter-bootstrap