证明引导导航栏链接

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">

这似乎有效，但它搞乱了很多由navbar-nav类处理的格式。

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

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

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

现在一切正常。