Boostrap :当您必须跳过一些元素时，可以更好地排列列和行中的元素。

Question

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

目前我有：

                <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>

对于我的第二个row元素，我放置了一个col-3 font-weight-bold的div标记为nothing。这样我的Total Cost和${this.state.total.toLocaleString()}就能与Item Name和Total保持一致。

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

Answer 1

您可以使用偏移。

在第二行中，消除空的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>