对齐 bootstrap 导航栏链接

Question

我试图使导航栏中的链接延伸到导航栏的全长。我环顾四周，发现了一些有用的信息，但无法正常工作

HTML:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-links">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span></a>

        </div>


        <div class="collapse navbar-collapse" id="collapsable-links">
            <ul class="nav navbar-nav">
                <li><a href="#">About</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

    </div>

这是我的导航栏。我尝试将 nav-justified 添加到我的 ul 标签并设置以下 CSS

.navbar-nav>li {
  float: none;
}

这种方法有效，但由于我认为是品牌，它使所有链接都下降了

我将主页按钮从页眉中移出并将其添加到我的 ul 中的 li（我不希望它折叠但我想我会测试它）并且这种方法也有效

上面的问题是所有内容似乎都向右对齐，而我需要它向左对齐。我正在为此苦苦挣扎，我们将不胜感激。

Answer 1

起初我通过更改我的代码来解决这个问题：

<ul class="nav navbar-nav nav-justified">

至：

<ul class="nav nav-justified">

这似乎可行，但它弄乱了很多由导航栏导航处理的格式 class。

在查看了 boostrap css 文件并玩了几个 classes 之后，我设法解决了这个问题。 nav-justified 设置为宽度 100%，但由于在 navbar-nav class 中设置了一些填充，这不再适合一行，并且将链接向下推。使用下面的代码我设法解决了问题

.nav-justified {
width: 98%;
}
.nav-justified > li {
float: none;
}
@media (min-width: 768px) {

    .nav-justified {
        width: 97%;
    }
}

现在一切正常。

对齐 bootstrap 导航栏链接

Justify bootstrap navbar links

html

css

navbar

twitter-bootstrap