小编nag*_*ono的帖子

我有一个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/

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