Bootswatch 主题无法正常工作答案

【问题标题】：Bootswatch theme not working correctlyBootswatch 主题无法正常工作
【发布时间】：2018-06-07 15:39:25
【问题描述】：

这是我第一次使用 ASP.NET，我正在尝试使用 Bootswatch 主题，但是当我尝试使用它时，页面顶部的导航栏变成了一个奇怪的下拉菜单。

我做错了吗？我刚刚用 Bootswatch 的新的 bootstrap.css 替换了当前的 bootstrap.css。

【问题讨论】：

如果我没记错的话，预装 mvc 模板的 boostrap 的默认版本是 v3.x.x，而 boostwatch 可能使用的是 v4.x.x。导航栏从 v3 到 v4 略有变化，因此可能会导致该问题。
好的，有办法解决吗？
最简单的方法是降级到基于 bootstrap3、bootswatch.com/3 的 boostwatch，或者您可以使用新的 bootstrap4 指令更新 html。
现在您可以使用最新版本的 Bootswatch (v4.1.3) - bootswatch.com 或者您可以使用 BootstrapPlusPlus。 - bootstrapplusplus.com

标签： css asp.net asp.net-mvc twitter-bootstrap bootswatch

【解决方案1】：

Bootswatch 使用 data-bs-toggle，但不起作用，我更改为 data-toggle，这正好解决了我的问题

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

您的 html 中可能缺少 Javascript 或 jquery 文件

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js></script>

在你的 HTML 中添加这些

【讨论】：

【解决方案3】：

Bootswatch 是一个很好的资源，但您也可以在此处找到很好的资源，例如为 ASP.NET MVC 制作的一些免费模板，这些模板使用 MDBootstrap（构建在 Bootstrap 之上的前端框架）：

ASP.NET MVC MDB Templates

【讨论】：

【解决方案4】：

我遇到了同样的问题，解决此问题的最佳方法是通过使用导入 URL 标记降级或使用替代版本 3 或 4

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");
/*!
 * bootswatch v3.4.1
 * Homepage: http://bootswatch.com
 * Copyright 2012-2019 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

这刚刚解决了我的问题，谢谢大家

【讨论】：

【解决方案5】：

我遇到了同样的问题，并意识到在我的 bootswatch css 文件中它使用的是当前最新版本的 v4.x。为了解决这个问题，我简单地通过导航到以前版本的 bootswatch 降级到 v3.x，并将 css 文件的文件内容复制到我的项目中并且它工作。这是降级版本的链接https://bootswatch.com/3/lumen/#navbar

【讨论】：

【解决方案6】：

检查 Bootswatch 页面的兼容版本

1) https://bootswatch.com/

2) https://bootswatch.com/3/

试试这两个。其中一个应该可以工作

【讨论】：

【解决方案7】：

问题是默认 mvc-templates 中使用的 bootstrap 版本和 bootswatch 主题的版本不对应。

我通过从这个链接https://bootswatch.com/3/下载一个兼容的主题来修复它

最简单的方法是降级到基于 bootstrap3、bootswatch.com/3，或者您也可以更新 html 与新的 bootstrap4 指令

感谢 StaticBeagle 的快速解答！

【讨论】：