bootstrap导航栏中的项目数

Question

我使用的引导导航栏包含3个元素 我希望它分布在整个导航栏中，但它没有。

以下是代码：

<div class="navbar steps" style="position:relative;z-index:7">
    <div class="navbar-inner">
        <ul class="row-fluid nav nav-pills">
            <li class="span3 active">
                <a href="#tab1" data-toggle="tab" class="step active">
                    <span class="number">1</span>
                    <span class="desc"><i class="icon-ok"></i> Source</span>   
                </a>
            </li>
            <li class="span3">
                <a href="#tab2" data-toggle="tab" class="step">
                    <span class="number">2</span>
                    <span class="desc"><i class="icon-ok"></i> Détail</span>
                </a>
            </li>
            <li class="span3">
                <a href="#tab3" data-toggle="tab" class="step">
                    <span class="number">3</span>
                    <span class="desc"><i class="icon-cog"></i> Configuration</span>
                </a>
            </li>

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

Answer 1

Bootstrap grids由12列布局构建。如果您想要三个项目占据整个宽度，请使用span4（= 12 / 3 ）。

尝试将span3更改为span4。

Here's a Demo in jsFiddle

这应该是这样的：

代码：

<div class="navbar steps" style="position:relative;z-index:7">
    <div class="navbar-inner">
        <ul class="row-fluid nav nav-pills">
            <li class="span4 active">
                <a href="#tab1" data-toggle="tab" class="step active">
                    <span class="number">1</span>
                    <span class="desc">
                        <i class="icon-ok"></i>
                        Source
                    </span>   
                </a>
            </li>
            <li class="span4">
                <a href="#tab2" data-toggle="tab" class="step">
                    <span class="number">2</span>
                    <span class="desc">
                        <i class="icon-ok"></i>
                        Détail
                    </span>
                </a>
            </li>
            <li class="span4">
                <a href="#tab3" data-toggle="tab" class="step">
                    <span class="number">3</span>
                    <span class="desc">
                        <i class="icon-cog"></i>
                        Configuration
                    </span>
                </a>
            </li>

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

---

选项2

正如fasouto指出的那样，您也可以尝试使用justified navbar。

Here's a Justified Demo