html - Bootstrap 3 如何在较小的视口(viewport)中不堆叠 nav-justified

Question

我有一个 Bootstrap 导航，我需要避免将它堆叠在较小的视口(viewport)上，以便它保持水平并且不会堆叠。

举个例子

HTML:

<div class="menuBar">
    <ul class="nav nav-justified">
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
    </ul>
</div>

CSS:

.menuBar ul {
    text-align: justify;
}
.menuBar ul li a {
    display: inline-block;
}
.menuItem {
    font-size: 24px;
}

扩展版本:http://jsfiddle.net/m5k93rwo/

最好的方法是什么？我怀疑有些人玩数据切换，但不幸的是，我没有足够的经验来确定如何让它运作良好

Answer 1

在所有其他 css 之后添加此 css:

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }