Bootstrap按钮样式修改问题：.btn类margin-bottom设置不生效求助

尝试给Bootstrap的.btn类添加margin-bottom: 10px自定义样式，但修改未生效，仅内联样式能实现效果，现提供非内联的解决方案：

提供的代码 #

CSS代码

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.btn {
    margin-bottom: 10px;
}

HTML代码

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='font-awesome-4.7.0/css/font-awesome.min.css') }}">
{% endblock %}

<h3>Productivity</h3>
<div class="row no-gutters">
  <div class="col-3 col-xl-3 col-lg-4 py-1">
         <button class="btn btn-warning" data-criteria="wifi" data-toggle="button">
             <i class="fa fa-fw fa-wifi"></i>
             <br>
             <span title="Stable Wi-Fi">
              Wi-Fi
             </span>
          </button>
 </div>

问题原因 #

自定义的.btn选择器优先级与Bootstrap内置的.btn样式优先级相同，若存在其他更具体的选择器，或者样式被后续规则覆盖，就会导致修改不生效。

解决方案 #

1. 提升选择器优先级：使用更具体的选择器覆盖Bootstrap样式，比如结合父容器类或按钮的额外类：

/* 基于父容器的选择器 */
.col-3 .btn {
    margin-bottom: 10px;
}

/* 结合按钮的警告类选择器 */
.btn.btn-warning {
    margin-bottom: 10px;
}

2. 排查样式覆盖：打开浏览器开发者工具（F12），选中按钮元素，查看margin-bottom属性是否被划掉，找到覆盖该样式的规则，针对性调整选择器或样式顺序。

效果截图 #

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