Bootstrap nav-justified stacks li答案

【问题标题】：Bootstrap nav-justified stacks liBootstrap nav-justified stacks li
【发布时间】：2016-01-09 20:56:04
【问题描述】：

我想知道当我使用 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 中没有关于该问题的任何内容。

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

我读到 Safari 浏览器在使用 nav-justified 时存在错误。使用 nav-justified 是个坏主意吗？我应该使用 css 来操作文本吗？或者是否有一个简单的解释来解释为什么要窃听和堆叠所有东西？

在此感谢您

【问题讨论】：

标签： html css twitter-bootstrap navigation navbar

【解决方案1】：

从里面的<ul>元素中移除navbar-nav类

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

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

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

float: left 会导致“堆栈”效应。

【讨论】：

如果这确实是解决方案，OP 应该只打开一个浏览器检查器并自己花 5 秒钟时间检查这一点，因为很容易发现每个元素应用了哪些样式。

【解决方案2】：

根据文档Justified

轻松使 tabs 或 pills 在屏幕上与其父级的宽度相等使用 .nav-justified 比 768px 更宽。在较小的屏幕上，导航链接是堆叠的。

如果没有进一步的 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

【讨论】：