ASP.NET Web 应用程序无法使用自定义引导程序正确显示内容

Posted 2023-03-06

【中文标题】ASP.NET Web 应用程序无法使用自定义引导程序正确显示内容

【英文标题】：ASP.NET web application cannot display things properly with custom bootstrap

【发布时间】：2018-06-13 19:30:16

【问题描述】：

我刚刚创建了 asp.net mvc 应用程序。我想改变网站的“主题”，我必须要bootswatch 并选择暗色主题。然后我将其添加到Content 文件夹并编辑App_Start\BundleConfig.cs 更改：

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

到：

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

成功了。但是使用默认主题的网站看起来像这样：

使用darkly 引导它不会显示Home About Contact Register Log in 选项卡：

我必须点击箭头指向的那个小按钮才能显示这些列表。

我在 Google Chrome、Firefox 和 Microsoft Edge 中进行了尝试。我尝试了其他文件，如Lumen 或Superhero。还是没有效果。在我从中学习所有这些的视频中：https://www.youtube.com/watch?v=E7Voso411Vs，它的作者使用了Lumen，它对他有用。

你能看出我做错了什么吗？

@编辑。这是我的解决方案浏览器：

这是我的导航栏部分：

我使用 Inspect 检查了这些内容，在这里它们有所不同：

【问题讨论】：

找出问题的最佳方法是使用谷歌开发者工具。然后你可以看到哪些 css 样式被应用了，哪些没有。

嗯，不知道该怎么做。我只能说页面源看起来完全一样，只是引导文件的路径不同

您的文件未正确加载，您可以分享您的解决方案资源管理器屏幕截图或检查谷歌浏览器中的控制台选项卡。

从 ~/Views/Shared 文件夹中的 _Layout.cshtml 文件中检出导航栏部分。你还需要知道如何使用 Chrome 开发者工具。对于 Web 开发人员来说，这是必须的。使用 [this](developer.chrome.com/devtools) 链接作为学习参考。

我已将解决方案资源管理器和导航栏部分屏幕截图添加到问题中。顺便说一句，我不是 Web 开发人员：D 我只是想让我的程序（这是 TSP 的遗传算法）在 Web 上显示其输出以使其看起来更好

【参考方案1】：

根据我可以从this Stack Overflow question 和this page from Booststrap 拼凑的内容，问题在于 Bootstrap 4 包含一些“重大更改”。您的 MVC 模板是为 Bootstrap 3 构建的，因此即使为您的项目升级 Bootstrap 版本也无法修复它，因为您需要使用的类已更改。

你有两个选择。一种是更新你的 Layout 文件，你可以查看 Bootstrap 页面的this section 或this Stack Overflow question 以获得指导。我还发现单击 Bootswatch 示例页面上的“”按钮以查看导航栏的代码非常有帮助。

或者，对于真正简单的方法，您可以改用Booststrap version 3 theme。这应该可以帮助您启动并运行。