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元素，我放置了div标记为col-3 font-weight-bold的内容。以便我的Total Cost和${this.state.total.toLocaleString()}与Item Name和Total对齐。

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

Answer 1

您可以使用offset。

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

Boostrap：当您不得不跳过某些元素时，排列列和行中元素的更好方法

1 个答案: