VS2022 ASP.NET Core MVC中Bootstrap样式不生效及样式包使用问题

你通过NuGet安装Bootstrap后样式没生效，是因为ASP.NET Core不会自动把NuGet包里的静态文件（CSS/JS）引入到页面中，得手动配置引用。下面是具体操作步骤：

一、确认Bootstrap文件位置 #

安装NuGet包bootstrap后，相关文件会被下载到项目的wwwroot/lib/bootstrap/dist目录下，你可以检查下这个路径里有没有css/bootstrap.min.css（样式文件）和js/bootstrap.bundle.min.js（脚本文件，Bootstrap5自带Popper，不用单独安装）。

二、修改布局页引入Bootstrap #

打开Views/Shared/_Layout.cshtml（项目的全局布局页，所有页面默认都会复用它），做两处修改：

1. 在<head>标签内的样式引用区域，添加Bootstrap的CSS引用：

   <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
   

   可以放在默认的site.css引用之前，确保Bootstrap样式优先级更高。

2. 在页面底部</body>标签之前，添加Bootstrap的JS引用：

   <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   

   放在默认的脚本引用（比如site.js）之前或之后都可以。

三、验证效果 #

随便打开一个页面（比如Home/Index.cshtml），添加一个带Bootstrap样式的元素测试：

<button class="btn btn-primary">测试Bootstrap按钮</button>

运行项目后，如果按钮显示为Bootstrap默认的蓝色圆角样式，就说明配置成功了。

备选方案：用LibMan安装Bootstrap（更直观） #

如果觉得NuGet找文件麻烦，可以用Visual Studio自带的LibMan工具安装：

• 右键项目 → 选择「添加」→「客户端库」
• 在弹出的窗口中，「提供程序」选cdnjs，搜索bootstrap，选择5.2.1版本，勾选css和js目录，「目标位置」设为wwwroot/lib/bootstrap，点击「安装」
• 安装完成后，再按照上面第二步的方法，在_Layout.cshtml里引用对应的文件即可。

注意事项 #

• 你的项目默认已经配置了静态文件支持，Program.cs里的app.UseStaticFiles();中间件是默认添加的，不用额外修改。
• ASP.NET Core已经废弃了App_Start、App_Data这类旧文件夹，不用纠结它们的存在。

内容的提问来源于stack exchange，提问作者Raky