Reactjs Can'；在react中似乎没有实现引导网格

我有一个简单的React应用程序，我正在尝试添加引导。我已经通过index.html中的CDN实现了它。note有两个组件：Board和note。Board使用容器流体渲染div，note使用列渲染div。在当前代码中，没有行，但我知道我需要添加一行。目前，每个注释都作为块元素呈现在下一个注释的正下方，我不太确定如何修复它。 以下是电路板的相关代码：

    render() {
        return (
            <div className="board container-fluid">
                <button onClick={this.addNote.bind(null, "New Note")}
                        id="addNote">
                    Add
                </button>

                {this.state.notes.map(this.eachNote)}
                                    
            </div>
        )
    }
}

render（）{
返回(
添加
{this.state.notes.map（this.eachNote）}
)
}
}

并请注意：

renderNoteDisplay() {
        var styleToUse = this.noteAppearance();
        let commentID = this.uniqueId || 0;


        return (
            <div className="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                <div className="note" style={styleToUse}>
                    <p>{this.props.children}</p>
                    <input type="checkbox" onClick={this.noteBackground} defaultChecked={this.state.checked}></input>
                    <button onClick={this.addComment.bind(null, "New Comment " + commentID )}>Add Comment</button>
                    <span>
                        {/*
                        <button onClick={this.edit} id="edit"></button>
                        <button onClick={this.remove} id="remove"></button>
                        */}
                        <button onClick={this.editNote} id="edit">Edit</button>
                        <button onClick={this.removeNote} id="remove">Remove</button>
                    </span>
                </div>
                <div className="addComment">
                    {this.state.comments.map(this.eachComment)}
                </div>
            </div>
        )
    }
    render() {
        return this.state.editing ? this.renderNoteForm() : this.renderNoteDisplay()
    }

}

rendernotesplay（）{
var styleToUse=this.noteAppearance（）；
让commentID=this.uniqueId | | 0；
返回(
{this.props.children}

添加注释
{/*
*/}
编辑
去除
{this.state.comments.map（this.eachComment）}
)
}
render（）{
返回this.state.editing？this.renderNoteForm（）：this.renderNoteDisplay（）
}
}

---

有一个外部CSS，但我已经删除了任何位置属性。我知道我在做一些非常愚蠢的事情，但我感谢任何帮助。谢谢大家!

我建议您在index.html中直接使用CDN安装一种react引导npm