Reactjs 如何使用Bootstrap使我的笔记显示在React.js应用程序的多列中？

我创建了一个React应用程序，它可以让我生成笔记/将笔记发布到黑板上。现在，当我添加新注释时，它们显示在一列中。如何使用引导使注释显示在多个列中

如果缺少我提供的背景信息，我深表歉意。我有点不知所措，不知道包括什么和不包括什么

在我的index.js文件中，我添加了

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

在我的线路板组件文件中，我的渲染函数下当前有以下内容

render() {
   return (
     <div className="board">
     <div className="row">
     <div className="col-sm-6 col-md-4 col-lg- col-xl-2">
    {this.state.notes.map(this.eachNote)}
     </div>
     </div>

     <button onClick={this.addNote.bind(null, "New Note")}
    id="addNote"> Add </button>
     </div>
   )
  }

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

。那可能就是你要找的。。这可能就是你要找的。