Bootstrap nav ：转到下一行而不是推送导航的内容

Question

我正在使用 Boottrap 创建一个网站，但我正在为此苦苦挣扎（我对 Flexbox 有点陌生，我认为它会与它相关联）：

• 我希望我的每个菜单项都在一行上（我设法用空格做到了这一点：nowrap;）
• 我希望我的导航项目在没有剩余空间时放在第二行

我正在为第二种选择而苦苦挣扎。目前，当我有太多菜单项时，内容会被推到右侧并离开其容器。

我希望 nev 元素排在前面，同时将我的品牌名称保持在右上角。

这是它现在正在做的事情：

这就是我想要做的： 测试代码在这里可见：https://codepen.io/captain_torche/pen/PoPxwQj

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

Answer 1

您正在寻找的是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>