屏幕缩小时均匀拆分项目

Question

我有一个可以包含可变数量项目的菜单。随着屏幕宽度的减小，我希望将一半的菜单放到第二行。理想情况下，当屏幕变得更小并有四行时，我可以再次发生这种情况，但老实说，两行可能就足够了，然后我可以隐藏它并显示汉堡图标。

目前，当屏幕太小时，它只是一个垂直菜单。

我不确定我要问的是普通、简单的事情，还是实际上需要一些自定义编码才能完成。所以我也对替代解决方案持开放态度。例如，我的一个想法可能是将每三个菜单项包装在一个 div 中，这样它可能不会产生我想要的均匀拆分，但会一次向下移动 3 个项目，这不是我的第一选择，但我认为这是一个可行的妥协。

Answer 1

您可以通过限制导航栏ul 的宽度并添加flex-wrap. 来让菜单项换行到第二（或更多）行

您将无法使菜单项均等地换行（项目将到达空间的末尾然后换行），但这对您很重要，您可以调整导航栏的宽度 @987654323 @ 使用自定义媒体查询让菜单项移动得更均匀。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <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 w-75 flex-wrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Lorem ipsum</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">dolor sit</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">amet consectetur</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">adipisicing elit</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Temporibus</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">corporis suscipit</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">unde quidem adipisci</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ipsa rem</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">aliquam error</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">quas nesciunt</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">voluptatibus</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">quasi veniam illum</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">tempora quam</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">cupiditate</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">officia</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">fuga</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">esse</a>
            </li>
        </ul>
    </div>
</nav>