Bootstrap 3如何在较小的视口中不堆叠导航对齐

Question

我有一个引导导航，我需要避免在较小的视口上堆叠它，这样它就可以保持水平，不会堆叠。

以下是的示例

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;
  }