twitter-bootstrap-3 - MVCSiteMapProvider MVC 5 与 Bootstrap 3.2

Question

我和我的团队目前正在开发一个项目。我们最初从默认的 Bootstrap 版本开始，当时是 3.0。最近，我们决定更新一些已安装的 NuGet 包，包括 MVCSiteMapProvider。然而，当我们这样做时，我们的导航在 iPad 和 iPhone 上折叠时不再起作用。更新之前一直运行良好。每当我尝试单击/点击三栏菜单时，它都会向下滑动半秒，然后再次向上滑动。我们不知道该怎么办。

以下是我的页面的设置方式:

_Layout.cshtml:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application Name", "Index", "Home", null, new { @class = "navbar-brand" })
        </div>

        @Html.MvcSiteMap().Menu("BootstrapMenuHelperModel")

    </div>
</div>

MenuHelperModel.cshtml:

@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models

<ul id="menu" class="nav navbar-nav">
    @foreach (var node in Model.Nodes) { 
        <li>@Html.DisplayFor(m => node) 
            @if (node.Children.Any()) {
                @Html.DisplayFor(m => node.Children)
            }
        </li>
    }
</ul>

BootstrapMenuHelperModel.cshtml:

@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models

@helper TopMenu(List<SiteMapNodeModel> nodeList)
{
    @:<div class="collapse navbar-collapse"><ul class="nav navbar-nav">
        foreach (SiteMapNodeModel node in nodeList)
        {
            string url = node.IsClickable ? node.Url : "#";

            if(!node.Children.Any())
            {
               @:<li class="menu-item"><a href="@url">@node.Title</a></li>
            }
            else
            {
                @:<li class="menu-item dropdown"><a href="@url" class="dropdown-toggle" data-toggle="dropdown">@node.Title<b class="caret"></b></a>@DropDownMenu(node.Children)</li>
            }

            if(node != nodeList.Last())
            {
                @:<li class="divider-vertical"></li>
            }
        }
    @:</ul>@Html.Partial("_LoginPartial")</div>
}

@helper DropDownMenu(SiteMapNodeModelList nodeList)
{
    <ul class="dropdown-menu">
        @foreach(SiteMapNodeModel node in nodeList)
        {
            if(node.Title == "Separator")
            {
                @:<li class="divider"></li>
                continue;
            }

            string url = node.IsClickable ? node.Url : "#";

            if(!node.Children.Any())
            {
                @:<li class="menu-item"><a href="@url">@node.Title</a></li>
            }
            else
            {
                @:<li class="menu-item dropdown dropdown-submenu"><a href="@url" class="dropdown-toggle" data-toggle="dropdown">@node.Title</a>@DropDownMenu(node.Children)       </li>
            }
        }
    </ul>
}

@TopMenu(Model.Nodes)

CSS 文件:

.dropdown-submenu {
position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }
    /*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/
    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }

   .dropdown-submenu:hover > a:after {
       border-left-color: #ffffff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

       .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
   .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

所有其他 MVCSiteMapProvider 文件都是相同的。

BootstrapMenuHelperModel 是以这种方式设置的，以允许下拉菜单，因为它们是我们网站所必需的。我不知道在这种情况下该怎么办。我环顾四周，但没有看到这种情况下的任何具体内容。就像我说的，这些文件使网站正常工作，没有任何其他修改。

如果有人知道哪里出了问题，我将非常感谢您的帮助。

Answer 1

我意识到问题出在哪里了。我删除了 CSS 文件中的媒体查询，一切正常。我猜 Bootstrap 3.2 存在问题，而 3.0 则完美地接受了它。我仍然没有弄清楚为什么它停止工作，但任何人有任何他们想要分享的想法，我将不胜感激。对以后的引用很有帮助。