我的导航栏显示了太多项目和溢出。如何在更高的屏幕宽度下折叠它？ [复制]

Posted 2023-03-06

【中文标题】我的导航栏显示了太多项目和溢出。如何在更高的屏幕宽度下折叠它？ [复制]

【英文标题】：My navbar is displaying too many items and overflows. How can I collapse it at a higher screen width? [duplicate]

【发布时间】：2017-09-28 12:47:25

【问题描述】：

下面是我的代码。我尝试将 max-height 设置为其正常高度，并且进行了很多搜索，但没有发现任何效果。如果有区别，它位于 ASP.NET 母版页中。

div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/Pages/TeamProfile">ManageU</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/Pages/TeamProfile">Team Profile</a></li>
                    <li><a runat="server" href="~/Pages/PlayerSchedule">My Schedule</a></li>
                    <li><a runat="server" href="~/Pages/Roster">Roster</a></li>
                    <li><a runat="server" href="~/Pages/TestCal">Calendar</a></li>
                    <li><a runat="server" href="~/Pages/Tasks">Tasks</a></li>
                    <li><a runat="server" href="~/Pages/FindTime">Meetings</a></li>
                    <li><a runat="server" href="~/Pages/Contact">Contact</a></li>
                    <li><a runat="server" href="~/Pages/InvitePlayers">Invite</a></li>
                    <li><a runat="server" href="~/Pages/MyInfo">My Info</a></li>
                    <li><a runat="server" href="~/Pages/ChangePassword">Change Password</a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Pages/Landing" onclick="logOut_Click">Log Out</a></li>
                        </ul>
                    </AnonymousTemplate>
                </asp:LoginView>
            </div>
        </div>
    </div>

【问题讨论】：

包括你的 CSS

我正在使用默认的引导 css。除了颜色和字体，我没有进行任何修改，并尝试添加最大高度（这不起作用）。

您可以尝试组织您的导航栏项目。例如联系人、我的信息和密码可以在下拉菜单中说个人资料。任务、日历、花名册、时间表可以分组为任务下拉列表。它不仅不会弄乱您的导航栏，而且还可以让用户更轻松地找到所需的内容。

【参考方案1】：

在 Bootstrap 中会有一个媒体查询隐藏完整的导航，直到某个断点。您需要增加该断点的最小宽度，以便导航保持折叠状态，直到项目适合为止。

在新版本中是这样的。

@media (min-width: 992px)
  .navbar-toggleable-md .navbar-collapse 
      display: flex!important;
      width: 100%;
  


.collapse 
    display: none;