html - nav-pills 拉伸(stretch)全宽，使用 % 不起作用

Question

我正在开发一个小应用程序，现在必须处理它的前端部分。我正在为此使用 Bootstrap 。对于导航栏部分，我使用的是 nav-pills 导航栏，我希望它拉伸(stretch)到 100%。我的导航栏代码:

 <div class="navbar navbar-static-top" >
    <div class="navbar-inner">

            <ul class="nav nav-pills" >


                    <li ><a href="/">Home</a></li>
                    <li><a href="#">Some</a></li>
                    <li><a href="#">Items</a></li>
                    <li><a href="#">Here</a></li>

                    <li><a href="#">Register</a></li>
                    <li><a href="#">Login</a></li>

            </ul>
    </div>
</div>

现在是 css 部分:

.nav-pills{
    margin-top:20px;
    width:100%;

}
.nav-pills > li { 
  float: left;

}

现在，如果我将 nav-pills 中的 100% 更改为 1366px，它就会起作用。但是当我将它缩放到 100% 时，导航栏不会被拉伸(stretch)。我尝试将 .nav-pills > li 的宽度设置为 25%，尝试仅使用 4 个选项卡。这也给出了完美的结果。但是由于选项卡的数量因页面而异，我不想固定 .nav-pills > li 类的大小。我想将导航栏拉伸(stretch)到全宽。我应该怎么做？

Answer 1

Bootstrap 3 有一个 nav-justified完全符合您要求的类(在宽度超过 768 像素的屏幕上，在较小的屏幕上，导航链接堆叠在一起)。

只需将它添加到您的 .nav 中，如下所示:

<ul class="nav nav-pills nav-justified">
    <li ><a href="/">Home</a></li>
    <li><a href="#">Some</a></li>
    <li><a href="#">Items</a></li>
    <li><a href="#">Here</a></li>
    <li><a href="#">Register</a></li>
    <li><a href="#">Login</a></li>
</ul>

Demo fiddle