.cshtml前端页面如何正确激活按钮class类实现自定义样式

问题根因 #

按钮的class类名书写错误，Bootstrap框架的按钮样式遵循btn 基础类 + btn-xxx 场景类的命名规则，你当前代码里写的btn-btn-info、btn-btn-danger属于拼写错误的类名，浏览器无法匹配到对应的样式规则，因此按钮始终显示为浏览器默认原生样式。

修复方案 #

将所有按钮的class属性替换为正确的Bootstrap类名，如果需要匹配目标样式的间距，可以额外添加边距类调整，修正后的按钮代码如下：

<button type="submit" class="btn btn-info me-2" id="addition" value="addition" name="method">+</button>
<button type="submit" class="btn btn-danger me-2" id="substraction" value="substraction" name="method">-</button>
<button type="submit" class="btn btn-warning me-2" id="multiplication" value="multiplication" name="method">*</button>
<button type="submit" class="btn btn-light border" id="division" value="division" name="method">/</button>

额外排查点 #

如果修改类名后样式仍未生效，依次检查以下两项：

• 确认项目的布局页_Layout.cshtml中已经正确引入Bootstrap的CSS样式文件
• 按Ctrl+F5强制刷新页面，清除浏览器本地缓存的旧静态资源

效果参考 #

• 修改前默认样式效果：
  
• 目标实现效果：
  

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