Bootstrap 3 how not to fold nav is justified in smaller viewports

Question

I have bootstrap nav, and I need to avoid stacking them on small viewports so that it stays horizontal and doesn't fold.

Here is an example

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

Extended version: http://jsfiddle.net/m5k93rwo/

What is the best way to do this? I suspect that some play with data switching, but unfortunately I am not experienced enough to be sure how it works well.

Answer 1

Add this css after all your css:

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