javascript - 在 Twitter Bootstrap 3 中验证导航

Question

由于用于对齐导航的 Bootstrap 示例对我不起作用，我尝试构建自己的水平对齐导航。代码如下所示:

<div class="row">
    <div class="col-lg-12">
        <ul id="navigation">
             <li class=""><a href="#">One</a></li>
             <li class=""><a href="#">Two</a></li>
             <li class=""><a href="#">Three</a></li>
             <li class=""><a href="#">Four</a></li>
             <li class=""><a href="#">Five</a></li>
             <li class=""><a href="#">Six</a></li>
             <li class=""><a href="#">Seven<</a></li>
             <li class="stretch"></li>
        </ul>
    </div>
</div>

使用的CSS:

#navigation {
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#navigation li {
    display: inline
}

#navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

当导航一开始就存在时，就像静态代码一样，一切看起来都很好。当我的应用程序动态创建导航时，稍后会插入链接。那么这个理由是行不通的。

如何解决？

Answer 1

检查这个 fiddle 链接 http://jsfiddle.net/Mohinder/PAvnp/

将此 HTML 和 CSS 添加到您的 Bootstrap CSS 并检查，我刚刚为您制作了它..

这是HTML

<div class="row">
    <div class="col-lg-12">
        <ul id="navigation">
             <li class=""><a href="#">One</a></li>
             <li class=""><a href="#">Two</a></li>
             <li class=""><a href="#">Three</a></li>
             <li class=""><a href="#">Four</a></li>
             <li class=""><a href="#">Five</a></li>
             <li class=""><a href="#">Six</a></li>
             <li class=""><a href="#">Seven</a></li>
        </ul>
    </div>
</div>

这是CSS

#navigation {float:none; text-align:center; display:table; list-style:none; width:100%; }
#navigation li { float:none; display:table-cell; }
#navigation li a { display:block; line-height:20px; margin:0px 5px; }