nav-pills拉伸全宽，使用%不起作用

Question

我正在开发一个小应用程序，现在必须处理它的前端部分。我正在使用bootstrap。对于导航栏部分，我使用的是nav-pills导航栏，我希望将其拉伸到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%时，导航栏并未拉伸。我试着把.nav-pills > li的宽度设置为25%，只用了4个标签。这也给出了完美的结果。但是，由于选项卡的数量因页面而异，因此我不想固定.nav-pills > li类的大小。我想把导航栏拉到最大宽度。我应该怎么做呢？

Answer 1

Bootstrap 3有一个nav-justified类，它可以做你想要的事情(在大于768px的屏幕上，在较小的屏幕上，nav链接是堆叠的)。

只需像这样将其添加到您的.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>

Answer 2

nav-pills nav-justified项的宽度不固定。对于本例：HTML

<div class="gridProducts_box">
    <ul class="nav nav-pill">
        <li class="gridProducts_box__items">
            <a href="#tab-one" data-toggle="tab" class="btnFilter">One</a>
        </li>
        <li class="gridProducts_box__items">
            <a href="#tab-two" data-toggle="tab" class="btnFilter">Two</a>
        </li>
        <li class="gridProducts_box__items">
            <a href="#tab-three" data-toggle="tab" class="btnFilter">Three</a>
        </li>
        <li class="gridProducts_box__items">
            <a href="#tab-four" data-toggle="tab" class="btnFilter">Four</a>
        </li>
        <li class="gridProducts_box__items">
            <a href="#tab-five" data-toggle="tab" class="btnFilter">Five</a>
        </li>
    </ul>
</div>

CSS

/* nav tabs fixed wodth */
.gridProducts_box > ul.nav.nav-pills {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.gridProducts_box > ul.nav.nav-pills > li {
    float: none;
    display: table-cell;
}

    .gridProducts_box > ul.nav.nav-pills > li > a {
        text-align: center;
    }

.gridProducts_box__items {
    width: 100%;
}

Demo