Bootstrap按钮工具栏样式未生效问题求助

我创建了AddCustomElement类用于生成按钮工具栏（button toolbar）、按钮组（button group）和按钮，代码如下：

import '@fortawesome/fontawesome-free/css/all.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-gis/css/font-gis.css'
import 'iconicss/dist/iconicss.css'
import 'bootstrap';


class AddCustomElement {

    static CreateToolbar({nb_groups}) {
        this.Toolbar = document.createElement("div")
        this.Toolbar.className="btn-toolbar"
        this.Toolbar.role = "toolbar"
        for (let i=0; i < nb_groups; i++) {
            this.AddButtonGroup(this.Toolbar, i)
        }
        return this.Toolbar
    }

    static AddButtonGroup(target, id) {
        let el= document.createElement('div');
        el.className = "btn-group me-2";
        el.role = "group";
        el.id = `group-${id}`;
        target.appendChild(el);
        return el;
    };

    static AddCustomButton({id, target, title, icon, isActive}) {
        let el = document.createElement('button');
        el.className = 'btn btn-primary';
        el.id = id;
        el.title = title;
        el.innerHTML = `<i class="${icon}"></i>`;
        el.disabled = !isActive;
        target.appendChild(el);
        return el;
    };
}

export default AddCustomElement;

我在EditBar类中调用该类，将按钮添加到侧边栏，代码如下：

import AddCustomElement from '../miscellaneous/AddCustomElement';

/**
 * @module widget/EditBar
 */

class EditBar {
  constructor(target) {
    // 创建通用工具栏
    this.Toolbar = AddCustomElement.CreateToolbar({
      nb_groups: 3
    })

    // 选择按钮
    this.SelectButton = AddCustomElement.AddCustomButton({
      id: 'S1',
      target: this.Toolbar.childNodes[0], 
      title: 'Select', 
      icon: 'fg-arrow-o', 
      isActive : true
    })
    
    target.addWidgetElement(this.Toolbar)
  };
}

export default EditBar;

功能运行正常，但Bootstrap默认样式未生效，我尝试调整Bootstrap的导入顺序也没有解决问题，请问该如何修正？

• 确认CSS加载状态：打开浏览器开发者工具（F12），检查生成的按钮、工具栏元素是否存在Bootstrap的样式规则。如果看不到相关规则，说明CSS未被正确打包或注入页面，需检查构建工具（如Vite、Webpack）的CSS处理配置是否正常。
• 调整样式导入顺序：将Bootstrap的CSS导入移到所有其他CSS文件之后，确保其样式优先级更高：

  import '@fortawesome/fontawesome-free/css/all.css';
  import 'font-gis/css/font-gis.css'
  import 'iconicss/dist/iconicss.css'
  import 'bootstrap/dist/css/bootstrap.css'; // 移至末尾
  import 'bootstrap';
  

• 排查样式冲突：在开发者工具中查看元素的样式继承情况，确认是否有自定义样式或其他第三方CSS覆盖了Bootstrap的默认规则。如果存在冲突，可针对性调整选择器优先级，或修改冲突样式。
• 验证DOM挂载位置：尝试直接将工具栏挂载到document.body测试：

  // 替换原target.addWidgetElement(this.Toolbar)
  document.body.appendChild(this.Toolbar);
  

  若样式生效，说明问题出在target容器的样式限制上，需检查容器的CSS属性（如display、visibility或重置样式）。
• 重装Bootstrap依赖：确保Bootstrap版本与项目依赖兼容，若怀疑安装异常，可重装依赖：

  npm uninstall bootstrap
  npm install bootstrap
  

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