导航标签的高度相同 [英] Same height for nav tabs
本文介绍了导航标签的高度相同的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个引导标签,其中一些标签的文本很长,并且在标签和内容之间造成了难看的空间。如何设置其他选项卡的大小与最大选项卡的大小相同?
I have a bootstrap tabs, and some of them have very long text, and it creates ugly space between tabs and content. How can I set the other tabs to have the same size as the biggest one?
<div class="tabs">
<ul class="nav nav-tabs nav-justified">
<li>
<a href="#" class="text-center">
<i class="fa fa-wifi"/> Not that long</a>
</li>
<li>
<a href="#" class="text-center">
<i class="fa fa-map-marker"/> Something really really really long</a>
</li>
<li>
<a href="#" class="text-center">
<i class="fa fa-map-marker"/> Not that long</a>
</li>
<li class="active">
<a href="#" class="text-center">
<i class="fa fa-star"/> Not that long</a>
</li>
</ul>
<div class="tab-content"></div>
</div>
推荐答案
找到了解决方案!
<style>
.nav-tabs{
display: flex;
}
.nav-tabs li {
display: flex;
flex: 1;
}
.nav-tabs li a {
flex: 1;
}
</style>
这篇关于导航标签的高度相同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文