因此,我有一个使用引导程序选项卡的导航菜单。一切都很好,但是当窗口的宽度如此之大以至于选项卡(合理的)尚未堆叠时,它的显示就很奇怪(因为有些选项卡现在使用的是两行而不是一行),如您所见:
好:
坏:
这是HTML:
<ul id="onglets" class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#mod" data-toggle="tab"> addition (polaire) </a></li>
<li><a href="#com" data-toggle="tab"> addition (composantes) </a></li>
<li><a href="#con" data-toggle="tab"> conversion d'angles </a></li>
<li><a href="#mul" data-toggle="tab"> produit </a></li>
<li><a href="#uni" data-toggle="tab">vecteur unitaire </a></li>
</ul>
我想我在bootstrap.min.css中找到了与nav-justified相关的CSS:
.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border-bottom-color:#fff}}
我怎么解决这个问题?谢谢!
编辑:因此,通过播放bootstrap.min.css文件,我能够更改@media查询,以将要堆叠的选项卡更改为992px而不是768px(因为它将在991px时开始损坏)。它可以工作,但是如果有人有更好的解决方案,我就会开放!
最佳答案
使用white-space:nowrap;
您可以使选项卡始终显示在一行中,这可能是您的解决方案:
@media (min-width: 768px){
#onglets>li>a {
white-space: nowrap;
}
}
Demo fiddle