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>

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

1 个答案: