html - 对齐导航中的列表项

Question

我的菜单有以下 HTML

<nav id="site-navigation" class="main-navigation navbar navbar-default navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-inner">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav nav-menu" aria-expanded="false">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Shop</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

这是 Bootstrap 建议您使用的 HTML，因此菜单将在调整大小时响应。目前它看起来像this

问题是我想要 <li>根据宽度调整元素。Bootstrap 有 .nav-justified为此，但是当我这样做时，它没有正确显示并且它 float 了所有 <li>左边的元素。看起来像 this

如何使菜单项对齐？

Answer 1

将 ul.nav 元素上的 navbar-nav 类替换为 nav-pills(或 nav-tabs).

<ul class="nav nav-pills nav-menu" aria-expanded="false">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <!-- etc. -->
</ul>

参见:http://getbootstrap.com/components/#nav