Bootstrap 4 引导4导航栏<；李>；列表

我需要一些关于引导导航栏的帮助（引导v4.0.0-beta.3）

我必须改变什么，使按钮文本是单行的，而不是相互之间的。当该行已满时，其他按钮应从下一行的左侧开始

目前我使用以下代码：

<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
    <div class="container">
        <div class="row w-100 no-gutters d-lg-block d-flex flex-wrap justify-content-between">
            <a class="navbar-brand col-lg-3 col-7 py-lg-3 order-lg-1 order-2 float-left d-block" href="#">
                Project Name
            </a>
            <div class="navbar-text col-lg-6 col-12 order-lg-2 order-1 text-right float-right align-self-end">Fix Nav Info</div>
            <button class="navbar-toggler collapsed float-right order-3" type="button" data-toggle="collapse" data-target="#all-pages-176" aria-controls="all-pages-176" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="all-pages-176" class="navbar-collapse collapse float-right col-lg-12 order-4" style="height: auto;">
                <ul id="menu-all-pages" class="navbar-nav ml-auto">
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

                </ul>

            </div>
        </div>
    </div>
</nav>  

结果是：

应该如此

---

要达到您想要的效果，只需将

d-lg-inline-block

类添加到

ul

元素：

它从大（lg）断点开始将列表项转换为内联块元素，这使它们按照您描述的方式包装

下面是完整的工作代码片段：

@介质（最小宽度：992px）{
.导航项目{
字体大小：13px；
保证金：3倍；
填充：0px；
边框：1px实心#605555；
-webkit边界半径：15px；
-moz边界半径：15px；
边界半径：15px；
线高：8px；
}
}
修正导航信息

aah，太好了。非常感谢。这就是我想要的。非常好。我刚刚更新了我的代码片段，添加了

行高：8px以便更紧密地匹配屏幕截图中的外观。如果您喜欢，请随时向我投赞成票。：-）非常感谢。我画这幅画是为了让你明白我的意思；o） 我没有找到换行符的代码。我的样式表总的来说还是合适的。原因是：这些不是真正的换行符。这只是flexbox试图容纳尽可能多的项目，当一行中有太多项目无法容纳时，它会尝试拆分这样的单词。无论如何，只要使用本机bootstrap4类就可以实现您想要的效果。
@media (min-width: 992px) {
    .nav-item {
        float: left;
        font-size: 13px;
        margin: 3px;
        padding: 0px;
        border: 1px solid #605555;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px; 
    }
}