时间戳

首页 > 解决方案 > Bootstrap 3网站标题菜单折叠在中间屏幕宽度中不起作用

javascript - Bootstrap 3网站标题菜单折叠在中间屏幕宽度中不起作用

问题描述

我发现当缩小到指定大小（可能是平板电脑宽度）以下时，我网站上的标题菜单会从水平菜单变为垂直菜单，而不是折叠以便需要单击条形图标才能显示完整菜单，完整菜单保持打开状态，阻止访问以下页面。当进一步缩小（大概到移动宽度）时，垂直菜单确实会折叠，留下要单击的图标，这正是应该发生的情况。HeaderMenu.cshtml 和 _Header.cshtml 如下所示：

<div class="navbar-collapse collapse float-right nav-main-collapse">
    <nav class="nav-main">
        <ul id="topMain" class="nav nav-tabs nav-button-tabs nav-tabs-justified">

            <li class="nav-item"><a href="@Url.Action("Index","Home")" class="nav-link ">Home</a></li>
            <li class="nav-item"><a href="@Url.Action("Meetings","Meeting")" class="nav-link">Meetings</a></li>
            <li class="nav-item"><a href="@Url.Action("NewsPosts","News")" class="nav-link">News</a></li>
            <!--<li class="nav-item"><a href="@Url.Action("NotesAndQueries","NotesAndQueries")" class="nav-link">Notes &amp; Queries</a></li>-->
            <li class="nav-item"><a href="@Url.Action("Proceedings","Proceedings")" class="nav-link">Proceedings</a></li>
            <li class="nav-item"><a href="@Url.Action("Publications","Publications")" class="nav-link">Publications</a></li>
            <li class="nav-item"><a href="@Url.Action("Images","Gallery")" class="nav-link">Gallery</a></li>
            <li class="nav-item"><a href="@Url.Action("MembershipApplication","MembershipApplication")" class="nav-link">Membership</a></li>
            <li class="nav-item"><a href="@Url.Action("Enquiries","Enquiry")" class="nav-link">Enquiries</a></li>
            <li class="nav-item"><a href="@Url.Action("Officers","Meeting")" class="nav-link">Committee</a></li>
            <li class="nav-item"><a href="@Url.Action("links","links")" class="nav-link">Links</a></li>

            @if (SignInManager.IsSignedIn(User))
            {
                <li class="nav-item"><a href="@Url.Action("Index","Admin")" class="nav-link">Admin</a></li>

            }
        </ul>
    </nav>
</div>

<div id="header" class="navbar-toggleable-md sticky clearfix">
    <!-- TOP NAV -->
    <header id="topNav">
        <div class="container">
            <!-- Mobile Menu Button -->
            <button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <link rel="shortcut icon" href="http://historyofbath.org/HBRG Logo.png" type="image/x-icon" />

            <!-- Logo -->
            <a class="logo float-left" href="/">
                <img style="height:100px;" src="~/images/HBRG Logo.png" alt="Logo" />
            </a>
            @Html.Partial("_HeaderMenu")
         </div>
    </header>
    <!-- /Top Nav -->
</div>

奇怪的是，我有一个几乎相同的站点，没有出现这个问题。所有的 css 库都是相同的，scripts.js 是相同的，等等。一个是从另一个构建的，除了明显的内部引用之外，这个标题菜单是相同的。我一直在无休止地修补这个问题，并且无法让垂直菜单按应有的方式折叠。

标签： javascripthtmljquerycssmainmenu

解决方案

我发现问题出在 _Layout.cshtml 文件中：

<!-- CORE CSS -->

    `<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />`
    `<link href="~/lib/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />`

通过删除对 bootstrap3 的引用，移动横向模式下的菜单应显示为折叠图标。

如果有人可以解释为什么这会导致这里出现问题，但在暂存、生产部分工作正常，请告诉我。

推荐阅读