Visual Studio 2019标准模板中Bootstrap轮播按钮显示异常原因？

DevOps 小满

2026-8-20

问题原因及解决办法

核心原因：项目自带全局样式覆盖了Bootstrap轮播按钮默认样式

Visual Studio 2019的MVC模板默认会生成Site.css文件，其中可能包含针对所有button标签或.btn类的全局样式（比如强制添加边框、阴影），这些样式的优先级高于Bootstrap轮播控件（.carousel-control-prev/.carousel-control-next）的默认样式，导致按钮显示异常。

具体排查与修复步骤：

打开项目中的Content/Site.css，搜索是否存在类似以下的全局按钮样式：
```
button {
    border: 1px solid #cccccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
```
若存在，要么直接删除这类全局样式（避免影响其他控件），要么给轮播按钮添加优先级更高的覆盖样式：
```
.carousel-control-prev, .carousel-control-next {
    border: none !important;
    box-shadow: none !important;
}
```
检查样式加载顺序：确保bootstrap.css在Site.css之前引入，保证自定义样式能正确覆盖默认样式（若全局选择器优先级过高，仍需调整选择器）。
验证Bootstrap文件完整性：对比项目中的bootstrap.css与官方Bootstrap 4.3.1原版代码，确认轮播按钮的默认样式未被篡改。
强制刷新浏览器：按Ctrl+F5清除缓存，避免加载旧的CSS文件。