Boostrap: лучший способ выравнивания элементов в столбцах и строках, когда нужно пропустить некоторые - PullRequest
Новая
       39

Boostrap: лучший способ выравнивания элементов в столбцах и строках, когда нужно пропустить некоторые

0 голосов
/ 05 октября 2018

Мне интересно, есть ли лучший способ выравнивания элементов с помощью 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 ничего.Просто чтобы My Total Cost и ${this.state.total.toLocaleString()} совпали с Item Name и Total.

Это мой личный проект, но я не думаю, что такая привычка пройдет проверку кода в реальном мире.Так есть ли лучший способ выравнивания столбцов, когда вам нужно пропустить определенные столбцы?

1 Ответ

0 голосов
/ 05 октября 2018

Вы можете использовать смещение .

Во второй строке исключить пустой 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>
...