导航选项卡的高度相同

Question

我有一个 bootstrap 标签，其中一些有很长的文本，它在标签和内容之间造成难看的 space。如何将其他选项卡设置为与最大的选项卡大小相同？

<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>

Answer 1

您可以将它们都加高，也可以缩短太长的标签名称。无论如何，选项卡名称真的不应该很长。

Answer 2

如果您不能使用 flexbox（旧版浏览器不支持），您唯一的选择是将所有选项卡的高度设置为与最高的选项卡一样高，明确指定像素高度。 Flexbox 是解决这类问题的一个很好但遗憾的是还没有完全可用的解决方案。没有它，就没有灵活的方法来实现这一点。

Answer 3

找到解决方案！

<style>
.nav-tabs{
    display: flex;
}
.nav-tabs li {
    display: flex;
    flex: 1;
}

.nav-tabs li  a {
    flex: 1;
}
</style>

导航选项卡的高度相同

Same height for nav tabs

css

tabs

twitter-bootstrap