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

Question

我创建了一个React应用程序，该应用程序可让我为板生成便笺/便笺。现在，当我添加新笔记时，它们会显示在单个列中。如何使用Bootstrap使笔记显示在多列中？

很抱歉，如果缺少我给定的背景信息。我有点迷茫，不确定要包含什么，不包含什么。

我在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>
   )
  }