为什么我不能设置导航标签的宽度

Question

我有 div 大小 col-md-4 的导航，我有 6 个标签，我无法将所有标签排列起来。

当我改变文本选项卡的字体大小时我可以连线，这对我来说不是一个好的解决方案。

我尝试为每个选项卡设置宽度，但没有用。如何将某些选项卡的宽度设置为小而次要大。

当我悬停在导航栏的末端时，我也有填充

http://i.imgur.com/9Px4qqk.png

        <nav class="row">
            <ul class="nav nav-tabs">
                <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-user"></span> Name &nbsp &nbsp<span class="glyphicon glyphicon-chevron-down"></span> </a></li>
                <li><a href="#"><span class="glyphicon glyphicon-flag"></span>Text Link </a> </li>
                <li><a href="#"> <span class="glyphicon glyphicon-envelope"></span> Message </a> </li>
                <li><a href="#"> <span class="glyphicon glyphicon-oil"></span>10 </a> </li>
                <li class="tab5"><a href="#"><span class="glyphicon glyphicon-asterisk"></span> </a> </li>
                <li><a href="#"><span class="glyphicon glyphicon-home"></span> </a> </li>
            </ul>



    </div>

CSS

.nav-tabs li .tab5{

    width:4%;
}

Answer 1

你的选择器是错误的，你必须这样做：

.nav-tabs li.tab5 {
    width: 4%;
}

class .tab5 在 li 标签上，因此您必须连接它们。

Working Example

更新

如果你想将所有内容都放在一行中，请尝试使用填充，如下所示：

.nav>li>a {
    padding: 10px 3px;
}

Updated Example

为什么我不能设置导航标签的宽度

Why I can't set width for nav tabs

html

css

tabs

twitter-bootstrap