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

概述我有一个bootstrap导航器,我需要避免在较小的视口上堆叠它,以便它保持水平并且不会堆叠. 这是一个例子 HTML： <div class="menuBar"> <ul class="nav nav-justified"> <li> <a href="#" class="menuItem"> <i class="g 我有一个bootstrap导航器,我需要避免在较小的视口上堆叠它,以便它保持水平并且不会堆叠.

这是一个例子

HTML：

<div >    <ul >        <li>            <a href="#" >                <i ></i>            </a>        </li>        <li>            <a href="#" >                <i ></i>            </a>        </li>        <li>            <a href="#" >                <i ></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/

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

解决方法 在你所有的其他CSS之后添加这个CSS：

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

总结

以上是内存溢出为你收集整理的html – Bootstrap 3如何在较小的视口中不进行导航对齐全部内容，希望文章能够帮你解决html – Bootstrap 3如何在较小的视口中不进行导航对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。