安装Bootstrap后SCSS定义的菜单居中，如何保留左侧对齐并正常使用Bootstrap？

解决方案 #

核心思路是通过提高自定义菜单样式的优先级，覆盖Bootstrap的默认样式，不会影响Bootstrap其他功能的正常使用，可按照以下步骤操作：

• 给你的菜单容器添加一个专属自定义类，例如custom-menu-wrap，避免样式污染其他Bootstrap组件
• 在SCSS文件中基于这个自定义类写对齐规则，根据你的布局类型选择对应规则：

  .custom-menu-wrap {
    /* 通用文本左对齐 */
    text-align: left;
  
    /* 如果菜单是flex布局，加上以下两行 */
    display: flex;
    justify-content: flex-start;
  
    /* 如果用了Bootstrap的nav组件，针对性覆盖 */
    &.nav {
      justify-content: flex-start;
    }
  
    /* 子菜单项也指定左对齐，避免继承Bootstrap的居中规则 */
    li, .nav-item, a {
      text-align: left;
    }
  }
  

• 调整样式加载顺序，确保你自定义SCSS编译后的CSS文件，在Bootstrap的CSS引入之后加载，同优先级下后加载的样式会覆盖先加载的样式
• 如果以上规则还不生效，可以临时加!important强制覆盖，优先级更高，但建议优先通过选择器权重解决问题

如果你用的是带样式隔离的前端框架，规则写在组件样式文件不生效的话，可以把上述规则移到全局样式文件中，就能正常覆盖全局引入的Bootstrap样式。

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