Javascript Boostrap：当您必须跳过某些元素时，将元素排列在列和行中的更好方法

我想知道是否有更好的方法使用引导来排列元素

目前我有：

                <div className="row">
                    <div className="col-3 font-weight-bold">
                        Item Name
                    </div>
                    <div className="col-3 font-weight-bold">
                        # of Item
                    </div>
                    <div className="col-3 font-weight-bold">
                        Total
                    </div>
                </div>
                <div className="row">
                    <div className="col-3 font-weight-bold">
                        Total Cost
                    </div>
                    <div className="col-3 font-weight-bold">
                    </div>
                    <div className="col-3 font-weight-bold">
                        ${this.state.total.toLocaleString()}
                    </div>
                </div>

项目名称
#项目的
全部的
总成本
${this.state.total.toLocaleString（）}

对于我的第二个

行

元素，我放置了一个

div

标签，标签为

col-3 font-weight bold

，没有任何内容。这样我的

总成本

和

${this.state.Total.toLocaleString（）}

将与

项目名称

和

总成本

对齐

这是我的个人项目，但我不认为像这样的习惯会通过现实世界中的代码审查。那么，当您需要跳过某些列时，有没有更好的方法来排列这些列呢

您可以使用

在第二行中，删除空的

div

，并将偏移量添加到最后一列：

<div className="row">
  <div className="col-3 font-weight-bold">
    Total Cost
  </div>
  <div className="col-3 offset-3 font-weight-bold">
    ${this.state.total.toLocaleString()}
  </div>
</div>

总成本
${this.state.total.toLocaleString（）}

谢谢，我刚读到有关网格系统的文章，也看到了它。！Css网格是一个很好的选择（对于IE11之后的浏览器）