将Nav药丸显示为网格

Question

当在中等宽度的视图窗格中查看页面时，我正在使用“垂直导航药丸连续显示”技术来连续显示导航药丸。在较小的屏幕上查看时，这些导航药丸每行堆叠一粒。这一切都按预期进行。

<div class="container">
  <div class="row mb20 mt20">
            <div class="col-md-3">
                <ul id="myTab" class="nav nav-pills nav-justified">
                    <li class="lead"><a id="tab1" href="#one" data-toggle="tab"><br>Lengthyword 1<br>&nbsp;<br></a></li>
                    <li class="lead"><a id="tab2" href="#two" data-toggle="tab"><br>Lengthyword 2<br>&nbsp;<br></a></li>
                    <li class="lead"><a id="tab3" href="#three" data-toggle="tab"><br>Lengthyword 3</a><br>&nbsp;<br></li>
                    <li class="lead"><a id="tab4" href="#four" data-toggle="tab"><br>Lengthyword 4</a><br>&nbsp;<br></li>
                    <li class="lead"><a id="tab5" href="#five" data-toggle="tab"><br>Lengthyword over various lines</a><br>&nbsp;<br></li>
                    <li class="lead"><a id="tab6" href="#six" data-toggle="tab"><br>Lengthyword 6</a><br>&nbsp;<br></li>
                </ul>
            </div>
   </div>
</div>

我想做的是每行吃两粒药，而不是通常的一粒。这样做最优雅的方式是什么？

我在https://codepen.io/mpoo/pen/MPqdyJ创建了一支笔