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>类

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

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

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

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

Answer 2

根据文件Justified

在屏幕上轻松制作标签或药片等于其父级的宽度使用.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

Bootstrap nav-justified stacks li

2 个答案: