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>

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

问题是我希望<li>项根据宽度来证明。 Bootstrap对此有.nav-justified但是当我这样做时，它没有正确显示并且它将所有<li>项浮动到左侧。看起来像this

如何使菜单项合理？

Answer 1

将navbar-nav元素上的ul.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

Answer 2

以前我遇到过这个问题，你所要做的就是改变类的％宽度，你必须指定宽度，因为默认宽度为1％

.nav-justified>li {
  display: table-cell;
  width: 15%;
}

在nav中对齐列表项

2 个答案: