Как отобразить одну строку из шести столбцов на рабочем столе и две строки из трех столбцов на мобильном устройстве? - PullRequest
Новая
       166

Как отобразить одну строку из шести столбцов на рабочем столе и две строки из трех столбцов на мобильном устройстве?

0 голосов
/ 21 июня 2020

У меня есть раздел, содержащий 6 изображений. Я хочу отобразить их в одной строке из 6 столбцов на рабочем столе, а затем в 2 строках по 3 столбца на мобильном устройстве.

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

Вот разметка: 

<div class="row">

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>

Ответы [ 2 ]

2 голосов
/ 21 июня 2020

Удалите "-sm" из имени класса, так как это нацелено на экраны размером ≥576 пикселей. Bootstrap 4 в первую очередь является мобильным, поэтому вам просто нужно использовать «col-4» для наименьших размеров экрана <576 пикселей, как описано в документации здесь <a href="https://getbootstrap.com/docs/4.0/layout/grid/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/layout/grid/

<div class="row">

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>
0 голосов
/ 21 июня 2020

Если это ваш html, попробуйте добавить данное CSS для желаемых выходов -

CSS & HTML - 

.row {
  width: 100%;
}

.row img {
  height: 100px;
  width: auto;
}

.col-sm-4 {
  height: 100px;
}

.col-sm-4:nth-child(1) {
  background: #999;
}

.col-sm-4:nth-child(2) {
  background: #888;
}

.col-sm-4:nth-child(3) {
  background: #777;
}

.col-sm-4:nth-child(4) {
  background: #555;
}

.col-sm-4:nth-child(5) {
  background: #333;
}

.col-sm-4:nth-child(6) {
  background: #111;
}

@media only screen and (max-width: 767px) {
  .col-sm-4 {
    float: left;
    width: 33.3%;
  }
}

@media only screen and (min-width: 768px) {
  .col-lg-2 {
    float: left;
    width: 16.6%;
  }
}
<div class="row">

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>

Пожалуйста, измените размер окна браузера, чтобы увидеть результаты.

...