bootstrap 按钮工具栏样式未应用

Question

我创建了一个“AddCustomElement”类来创建按钮工具栏、按钮组和按钮，如下所示：

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) {
    // Creation de la toolbar générale
    this.Toolbar = AddCustomElement.CreateToolbar({
      nb_groups: 3
    })

    // Bouton de sélection
    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，但它没有用。关于如何纠正它的任何想法？

这是我的代码的代码沙箱：https://codesandbox.io/p/github/vprint/ol-js-dom/main?