Как центрировать столбцы переполнения строки bootstrap? - PullRequest
Новая
       32

Как центрировать столбцы переполнения строки bootstrap?

0 голосов
/ 15 апреля 2020

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
</div>

Таким образом, эта строка имеет 6 столбцов, а затем переполняется на 3 столбца. Я хочу, чтобы последние три столбца выровнялись по центру, например margin: auto (см. Пример изображения). Я хотел бы использовать один стиль для строки.

Изображение того, что у меня есть сейчас и чего я хочу достичь:

Image on Imgur

1 Ответ

1 голос
/ 15 апреля 2020

Просто добавьте класс justify-content-center к вашей строке, как описано в документации системы координат BS4 , в разделе # Горизонтальное выравнивание . 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
</div>
...