css - .net mvc 默认应用程序，导航菜单不是水平的

Question

使用 VS2017，我创建了一个新的 MVC web 元素。当我运行默认应用程序时，导航菜单栏显示正常。

但是，当我升级 Nuget 包(仅 Bootstrap 从 3.3.7 到 4.1.3 和 Popper 1.14)然后运行默认应用程序时。 Viola，通常水平运行的菜单项都被隐藏了。当我单击“应用程序名称”左侧的小图标时，菜单显示为下拉菜单(见图)。

同样，除了升级 Nuget 包外，我什么也没做。所以 bootstrap 和其他一些元素得到了更新。

我无法想象我是唯一看到这个的人，但我找不到其他示例/问题。我检查了 Content 文件夹、BundleConfig.cs、_Layout.cshtml，它们看起来都很正常。

我检查了 F12，没有损坏的样式表链接等。

还有其他人看到了吗？

这是来自 _Layout.cshtml 的菜单代码。

<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>
                @*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
                <a class="navbar-brand" href="#">App name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>

BundleConfig.cs 是标准外观:

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }

Answer 1

许多类在 bootstrap 4 中被更改，因此您正在使用的类可能不再有效。

Here是 Bootstrap 4 中导航栏的一个工作示例。

检查 here用于 Bootstrap 4 导航栏文档。