Bootswatch 主題無法正常工作

Question

這是我第一次使用 ASP.NET，我正在嘗試使用 Bootswatch 主題，但是當我嘗試使用它時，頁面頂部的導航欄變成了一個奇怪的下拉菜單。

難道我做錯了什么？ 我剛剛用來自 Bootswatch 的新的 bootstrap.css 替換了當前的 bootstrap.css。

Answer 1

檢查 Bootswatch 頁面的兼容版本

1) https://bootswatch.com/

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

試試這兩個。 其中之一應該工作

Answer 2

問題是默認 mvc-templates 中使用的 bootstrap 版本和 bootswatch 主題版本不對應。

我通過從此鏈接https://bootswatch.com/3/下載兼容的主題來修復它

最簡單的方法是降級到基於 bootstrap3、bootswatch.com/3 的 boostwatch，或者您可以使用新的 bootstrap4 指令更新 html

感謝 StaticBeagle 的快速回答！

Answer 3

我遇到了同樣的問題，並意識到在我的 bootswatch css 文件中它使用的是當前最新版本的 v4.x。 為了解決這個問題，我只是通過導航到以前版本的 bootswatch 來降級到 v3.x，並將 css 文件的文件內容復制到我的項目中並且它起作用了。 這是降級版本的鏈接https://bootswatch.com/3/lumen/#navbar

Answer 4

我遇到了同樣的問題，解決此問題的最佳方法是使用 import 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 */

這剛剛解決了我的問題，謝謝大家

Answer 5

Bootswatch 是一個非常好的資源，但您也可以在此處找到一些很好的資源，例如一些為 ASP.NET MVC 制作的免費模板，這些模板使用 MBootstrap（構建在 Bootstrap 之上的前端框架）：

ASP.NET MVC MDB 模板

Answer 6

您的 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 中添加這些

Answer 7

Bootswatch 使用 data-bs-toggle，但不起作用，我更改為 data-toggle，這解決了我的問題