html - 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 Doc 中没有关于该问题的任何内容。

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

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

先谢谢你

Answer 1

删除 navbar-nav来自 <ul> 的类(class)里面的元素

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

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

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

float: left导致“堆叠”效应。