如何包装 Bootstrap 5 导航栏答案

【问题标题】：How to wrap a Bootstrap 5 nav bar如何包装 Bootstrap 5 导航栏
【发布时间】：2022-01-24 02:09:36
【问题描述】：

我希望我的 Bootstrap 5 导航可以换行，直到我到达 xs 大小的屏幕，然后显示小屏幕药丸。目前它不换行，当 xs 时菜单消失；但是，药丸没有出现。我有：

<nav id="myNavbarEP" class="navbar navbar-expand-lg navbar-expand-md navbar-sm navbar-xs navbar-light bg-light" style="display:none;">
      <div class="container-fluid"> 
        <div class="navbar-collapse collapse w-100 order-2 dual-collapse2">
            <ul class="navbar-nav me-auto align-middle">
              <li>
                  <a type="button" class="btn btn-colour1 nav-link dropdown-toggle align-middle" data-bs-toggle="dropdown" aria-expanded="false">Administration</a>
                    <ul class="dropdown-menu">
                        <li>
                            <a type="button" class="btn btn-colour1" href="BdyWghtMonAdmin.html">Body Weight Monitoring Frequency Administration</a>
                        </li>
                        <li>
                            <a type="button" class="btn btn-colour1" href="ClinicWorkingDay.html">Clinic Working Days</a>
                        </li>
                        <li>
                            <a type="button" class="btn btn-colour1" href="ClinicNonWorkingDate.html">Clinic Non Working Date</a>
                        </li>
                        <li>
                            <a type="button" class="btn btn-colour1" href="SupplementAdmin.html">Post-Training Supplement Aministration</a>
                        </li>
                    </ul>
                </li>
                 
                <li class="nav-item active">
                    <a type="button" class="btn btn-colour1" href="AccountUpdate.html">Account Update</a>
                </li>
                <li class="nav-item active">
                    <a type="button" class="btn btn-colour1" href="CalendarSession.html">Calendar Session</a>
                </li>
                <li class="nav-item active">
                    <a type="button" class="btn btn-colour1" href="CalendarSessionSeries.html">Calendar Session Series</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="ExerciseAdmin.html">Exercise Library</a>
                </li>
                <li class="nav-item">
                   <a type="button" class="btn btn-colour1" href="ExerciseMachineAdmin.html">Exercise Machine Library</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="PatientExerciseAss.html">Exercise Prescription</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="SessionSelect.html">Gym Session</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="PatientIssues.html">Issues/Adverse Events</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="SessionSeriesAdmin.html">Session Series Admin</a>
                </li>
            </ul>
        </div>
         
        <div class="navbar-collapse collapse w-100 order-2 dual-collapse2">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                    <a type="button" class="btn btn-info" href="HelpEP.html">Help</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-success" href="LoginRoleSelect.html">Select Role</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-danger" href="Login.html">Log out</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

【问题讨论】：

标签： html bootstrap-5

【解决方案1】：

将flex-wrap 类添加到<ul>。

【讨论】：

嗨，Raxi，快到了。当屏幕转到 xs 时，菜单仍然消失。我希望显示其中包含三条水平线的框（选择该框以在其自己的行上显示每个菜单项；即堆叠）。
我将为折叠问题创建一个新问题。感谢您的帮助。