如何正确覆盖Bootstrap的modal-footer CSS样式？

不需要修改Bootstrap原生的_modal.scss文件，用以下几种方法就能覆盖默认样式：

• 提升选择器优先级
  给你的.modal-footer添加更具体的父级选择器，让它的优先级高于Bootstrap的默认样式。比如如果你的模态框有自定义类（如.custom-modal），可以这么写：

  .custom-modal .modal-footer {
    justify-content: center;
    padding: 2rem;
    background-color: $color-dashboard-background;
    border-top: none;
    cursor: pointer;
  }
  

  也可以用body作为父选择器来提升优先级：

  body .modal-footer {
    justify-content: center;
    padding: 2rem;
    background-color: $color-dashboard-background;
    border-top: none;
    cursor: pointer;
  }
  

• 使用!important（应急方案）
  在justify-content属性后添加!important，强制覆盖默认样式：

  .modal-footer {
    justify-content: center !important;
    padding: 2rem;
    background-color: $color-dashboard-background;
    border-top: none;
    cursor: pointer;
  }
  

  注意：这种方法尽量少用，会增加后续样式维护的复杂度，优先选择提升选择器优先级的方式。

• 调整样式加载顺序
  确保你的全局modal.scss是在Bootstrap样式文件之后引入的。相同优先级的选择器，后加载的样式会覆盖先加载的，这样你的样式就能生效。

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