Блог

Главная - Вопросы по программированию - Как разделить 2 строки по 3 столбца в каждой на 3 строки по 2 столбца в каждой на мобильном экране с помощью BS4

Как разделить 2 строки по 3 столбца в каждой на 3 строки по 2 столбца в каждой на мобильном экране с помощью BS4

#html #css #bootstrap-4 #grid

#HTML #css #bootstrap-4 #сетка

Вопрос:

У меня есть 2 строки по 3 столбца на рабочем столе, например:

     <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>

и я хочу, чтобы они автоматически разделялись на 3 строки по 2 столбца на мобильном устройстве следующим образом:

 <div class="row">
  <div class="col-xs-6">
    1
  </div>
  <div class="col-xs-6">
    2
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    3
  </div>
  <div class="col-xs-6">
    1
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    2
  </div>
  <div class="col-xs-6">
    3
  </div>
</div>

Есть ли в bs4 предопределенный метод для этого или что-то только CSS Я не хочу использовать js для этого, потому что слишком много строк и столбцов с разными идентификаторами и классами. Спасибо!

Комментарии:

1. используйте col-6 вместо col-xs-6 .

2. Затем добавьте каждый col div в один row класс.

Ответ №1:

попробуйте это вместо,

Вы можете использовать элемент col div в одном row классе.

col-xs-* были удалены в Bootstrap 4 в пользу col-* .

Замените col-xs-6 на col-6 , и он будет работать, как ожидалось.

Просмотр рабочего стола
введите описание изображения здесь

Мобильная версия

введите описание изображения здесь

Дополнительная информация о сеточной системе Bootstrap 

 <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="container mt-3 text-center">
  <div class="row w-100 mx-auto">
    <div class="col-md-4 col-6 border">1</div>
    <div class="col-md-4 col-6 border">2</div>
    <div class="col-md-4 col-6 border">3</div>
    <div class="col-md-4 col-6 border">1</div>
    <div class="col-md-4 col-6 border">2</div>
    <div class="col-md-4 col-6 border">3</div>
  </div>
</div>

Ответ №2:

 <div class="row">
      <div class="col-md-4 col-sm">
        1
      </div>

      <div class="col-md-4 col-sm">
        2
      </div>
</div>

<div class="row">

      <div class="col-md-4 col-sm">
        1
      </div>

      <div class="col-md-4 col-sm">
        2
      </div>

</div>

<div class="row">

      <div class="col-md-4 col-sm">
        1
      </div>

      <div class="col-md-4 col-sm">
        2
      </div>

</div>