![m5k93rwo]( "m5k93rwo")
本文介绍了引导程序3如何不在较小的视口中堆叠导航对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是一个示例
我有一个bootstrap nav，我需要避免将它堆叠在较小的视口上，以便它保持水平并且不堆叠。 p>
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;
}
扩展版本：
最好的方法是做什么？我怀疑有些玩数据切换，但不幸的是，我没有足够的经验来确定它是如何使它正常工作的。
解决方案在所有其他css之后添加此css：
.nav-justified> li {
display：table-cell;
宽度：1％;
}
.nav-justified> li> a {
margin-bottom：0;
}
I have a bootstrap nav and I need to avoid stacking of it on smaller viewports so that it stays horizontal and does not stack.
Here is a 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 that? I suspect some play with data-toggle but, unfortunately, I'm not experienced enough to be sure how make it working well
解决方案
Add this css after all your other css:
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
margin-bottom: 0;
}
这篇关于引导程序3如何不在较小的视口中堆叠导航对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！