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

Question

我有一个bootstrap导航器,我需要避免在较小的视口上堆叠它,以便它保持水平并且不会堆叠.

这是一个例子

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