Bootstrap自定义.btn-xl类样式不生效，排查链接与拼写后仍无解

常见原因及解决办法： #

• CSS加载顺序错误：必须把你的自定义CSS文件放在Bootstrap CSS文件之后引入，示例：

  <!-- 先引入Bootstrap核心样式 -->
  <link rel="stylesheet" href="bootstrap.css">
  <!-- 再引入自定义样式文件 -->
  <link rel="stylesheet" href="custom.css">
  

  只有这样，自定义样式才能覆盖Bootstrap的默认规则。

• 选择器优先级不足：Bootstrap内置的.btn-primary类优先级可能高于你的.btn-xl，可以提升选择器权重，比如：

  .btn.btn-primary.btn-xl { 
    padding: 1rem 2rem; 
  }
  

  也可以临时用!important快速验证（不推荐长期使用，会增加样式维护复杂度）：

  .btn-xl { 
    padding: 1rem 2rem !important; 
  }
  

• 浏览器缓存干扰：浏览器可能缓存了旧的CSS文件，按下Ctrl+F5（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，加载最新的样式。

• 用开发者工具排查：按F12打开浏览器开发者工具，选中按钮元素，查看「样式」面板，确认你的.btn-xl规则是否存在，是否被划掉（划掉代表被更高优先级的样式覆盖）。

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