Как я могу использовать "оправдание" или "выравнивание", чтобы центрировать это? (Только для начальной загрузки)

#html #bootstrap-4

Вопрос:

Это мой код, и по какой-то причине я не могу его центрировать. Я пробовал выравнивать содержимое и выравнивать элементы для каждой строки и класса col, но это не работает. Я использую cdn с загрузкой 4.6.

этот:

ссылка rel=»таблица стилей» href=»https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css» целостность=»sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l» кроссоригин=»анонимный»

Мне нужно, чтобы 4 IP-адреса lorem были сосредоточены в точках останова (md, lg). Спасибо заранее!

 <section>    
  <div class="container vh-100">
  <div class="row row-cols-1 row-cols-md-2 bg-info">
  
  <div class="col col-md-6 col-lg-12"><h3>My Values</h3></div>
  
  <div class="col bg-danger col-md-6 col-lg-3 ">1 lorem ipsum</div>
  <div class="col col-lg-3 offset-md-6 offset-lg-0">2 lorem ipsum</div>
  <div class="col col-lg-3 offset-md-6 offset-lg-0">3 lorem ipsum</div>
  <div class="col col-lg-3 offset-md-6 offset-lg-0">4 lorem ipsum</div>
  </div>
  
  </div>
  
</div>
</section>

Ответ №1:

Вы можете использовать класс по умолчанию .text-center, предоставляемый bootstrap framework, и добавить его в родительский элемент, чтобы весь текст был центрирован.

измените эту строку, и элементы будут выровнены по центру.

 <section class="text-center">

Ответ №2:

 <section>    
<div class="container vh-100">
<div class="row row-cols-1 row-cols-md-2 bg-info text-center">

<div class="col col-md-6 col-lg-12"><h3>My Values</h3></div>

<div class="col bg-danger col-md-6 col-lg-3 ">1 lorem ipsum</div>
<div class="col col-lg-3 offset-md-6 offset-lg-0">2 lorem ipsum</div>
<div class="col col-lg-3 offset-md-6 offset-lg-0">3 lorem ipsum</div>
<div class="col col-lg-3 offset-md-6 offset-lg-0">4 lorem ipsum</div>
</div>

</div>

</div>
</section>

добавьте класс текстового центра в <div class="row row-cols-1 row-cols-md-2 bg-info text-center">

Ответ №3:

Разве вы не пытались добавить в контейнер с классом «row row-cols-1» класс «d-flex»?