ASP.NET MVC5 Bootstrap CSS乱搞导航？

Question

我目前是ASP.NET新手，目前正在学习如何更改主题。

我做了什么：

1. 使用VS2017，我启动了一个新的ASP.NET Web应用程序。这是我更改CSS之前的默认主题。

2. 我从https://bootswatch.com/lumen/获得了一个主题，并用多个教程指示的新主题代码替换了Content / bootstrap.css。

完成这些步骤后，我的标题导航会变得混乱并突然变成一个丑陋的下拉菜单？

下面是它应该看起来的样子。

有人能告诉我哪里出错了，或者我错过了什么步骤？我按照从视频教程到T的说明，我没有错过任何步骤，我无法实现相同的输出。唯一的区别是教练正在使用VS2013。

Answer 1

你正在观看Mosh Hamedani制作的ASP.NET MVC 5课程。您正在下载最新版本的Bootswatch主题，该主题适用于 Bootstrap 4 。默认的MVC 5模板使用 Bootstrap 3 。

您需要下载此版本的Lumen主题：“https://bootswatch.com/3/lumen/”

---

或者，您可以通过更新Bootstrap NuGet包升级到Bootstrap 4。

Answer 2

如果您无法更新引导块。您可以在Shared文件夹内_Layout.cshtml中的div标签中更改类。我所做的是将代码更改为此语法。

<div class="navbar navbar-expand navbar-fixed-top">

显示为<div class="navbar navbar-inverse navbar-fixed-top">

将类更改为navbar navbar-expand navbar-fixed-top，由于它只是隐藏的，它将扩展导航栏中的所有菜单。

Answer 3

下载 Lumen 主题的 Bootstrap 3 版本的另一种方法是通过 Bootswatch GitHub 存储库。

CSS 文件的 URL： https://raw.githubusercontent.com/thomaspark/bootswatch/v5/docs/3/lumen/bootstrap.css

在撰写本文时，Bootswatch 主页的顶部有指向 GitHub 存储库的链接，可将您引导至下面的 URL。

Bootswatch GitHub 存储库的 URL： https://github.com/thomaspark/bootswatch/