Twitter bootstrap 引导导航：转到下一行，而不是按导航'；内容

我正在用Boottrap创建一个网站，我正在努力解决这个问题（我对Flexbox有点陌生，我想它会链接到它）：

• 我希望我的每个菜单项都在一行上（我设法用空白：nowrap；）
• 我希望我的导航项目在没有剩余空间时转到第二行

我正在为第二种选择而挣扎。目前，当我有太多的菜单项时，内容会被推到右边并从容器中取出

我希望新能源汽车的元素进入生产线，同时保持我的品牌名称在右上角

下面是它现在正在做的事情：

下面是我想做的： 测试代码在此处可见：

您要查找的是

flex wrap

属性

它定义了弹性项是强制在一行中还是可以流到多行中

默认值为

no wrap

强制元素（此处的列表）显示在单行上

因此，如果您需要创建多行，您需要使用

wrap

值，并且可以使用Bootstrap 4类

flex wrap

轻松创建该值，您可以转到下一行

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav mr-auto  flex-wrap">
                <li class="nav-item">
                    <a class="nav-link" href="">First element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Second element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Third element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Fourth element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Fifth element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Sixth element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Seventh element</a>
                </li>
            </ul>
        </div>
        <a class="navbar-brand" href="/">My Brand</a>
    </nav>
</div>

哦，是的，非常感谢！这正是我所需要的。

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav mr-auto  flex-wrap">
                <li class="nav-item">
                    <a class="nav-link" href="">First element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Second element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Third element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Fourth element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Fifth element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Sixth element</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Seventh element</a>
                </li>
            </ul>
        </div>
        <a class="navbar-brand" href="/">My Brand</a>
    </nav>
</div>