Создайте 5 столбцов на повторе в Bootstrap 4

Мне нужно создать сетку из 5 столбцов в Bootstrap 4, чтобы показать более 100 изображений. Код ниже работает ТОЛЬКО, если у меня есть 5 элементов. Как я могу это сделать?

PS: он должен изменить сетку из 2 столбцов на мобильном экране.

Я понимаю, что есть много дубликатов с правильно отмеченным ответом, но нет реального решения, когда у меня более 5 столбцов.

Демонстрация JSFiddle: https://jsfiddle.net/fwg2os0h/

<div class="row">
   <div class="col">
      1
   </div>
   <div class="col">
      2
   </div>
   <div class="col">
      3
   </div>
   <div class="col">
      4
   </div>
   <div class="col">
      5
   </div>
   <div class="col">
      6
   </div>
   <div class="col">
      7
   </div>
   <div class="col">
      8
   </div>
   <div class="col">
      9
   </div>
   <div class="col">
      10
   </div>
</div>

css twitter-bootstrap bootstrap-4
person Elaine Byene    schedule 22.10.2019    source источник
comment
@IvanKaraman Я не думаю, что это действительно помогает ...   -  person Praveen Kumar Purushothaman    schedule 22.10.2019
comment
@IvanKaraman Чувак!   -  person Elaine Byene    schedule 22.10.2019
comment
@ElaineByene каждое изображение будет заключено в столбец?   -  person Ivan Karaman    schedule 22.10.2019
comment
@IvanKaraman Это во многом вопрос о flexbox ... Так что решение на самом деле лежит в CSS.   -  person Praveen Kumar Purushothaman    schedule 22.10.2019
comment
@ElaineByene эта задача не для начальной загрузки, хорошим решением будет использование некоторой сетки изображений, например каменной кладки или чего-то подобного другого решения для создания пользовательского макета ...   -  person Ivan Karaman    schedule 22.10.2019

Ответы (3)


arrow_upward
2
arrow_downward

Возможно, вы можете установить min-width на 20%, и это должно исправить ситуацию. В любой момент времени он будет иметь минимальную ширину 20%, что заставит отображать только 5 строк.

.my-col {
  min-width: 20%;
}

А для мобильной поддержки используйте пользовательский медиа-запрос, чтобы установить min-width: 50%.

@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}

Демонстрации

Вот как это выглядит, когда это нормально.

.my-col {
  min-width: 20%;
}
@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col my-col">
    1
  </div>
  <div class="col my-col">
    2
  </div>
  <div class="col my-col">
    3
  </div>
  <div class="col my-col">
    4
  </div>
  <div class="col my-col">
    5
  </div>
  <div class="col my-col">
    6
  </div>
  <div class="col my-col">
    7
  </div>
  <div class="col my-col">
    8
  </div>
  <div class="col my-col">
    9
  </div>
  <div class="col my-col">
    10
  </div>
</div>

Когда у вас меньше 5, он автоматически покажет их оправданными.

.my-col {
  min-width: 20%;
}
@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col my-col">
    1
  </div>
  <div class="col my-col">
    2
  </div>
  <div class="col my-col">
    3
  </div>
  <div class="col my-col">
    4
  </div>
</div>

person Praveen Kumar Purushothaman    schedule 22.10.2019
comment
Спасибо. Нет класса bootstrap 4, который поддерживает это из коробки? - person Elaine Byene; 22.10.2019
comment
@ElaineByene Нет, пока ничего. Но это полностью индивидуальное требование, и я не думаю, что такое решение будет реализовано в такой структуре. - person Praveen Kumar Purushothaman; 22.10.2019
comment
@ElaineByene Если мы не используем для этого сетку Bootstrap и произвольно даем 20%, это будет идеально, поскольку у нас нет макета из 5 столбцов. Это либо 6 столбцов, либо 4 столбца, поскольку он основан на макете из 12 столбцов. - person Praveen Kumar Purushothaman; 22.10.2019
comment
кстати, нашел проблему. если у меня нет точных 5 элементов, ширина увеличивается до 100%. См. последнюю строку здесь: jsfiddle.net/xuL8h5vm - person Elaine Byene; 22.10.2019
comment
@ElaineByene Вот что я упомянул здесь: When you have less than 5, it will automatically show them justified. Вы пропустили это? Если вы не хотите, чтобы это было оправдано, вы можете просто использовать width: 20% вместо min-width: 20%. - person Praveen Kumar Purushothaman; 22.10.2019
comment
Я сделал это, но это не работает: jsfiddle.net/xuL8h5vm/1 - person Elaine Byene; 22.10.2019
comment
@ElaineByene Исправил здесь: JSFiddle. Просто добавьте max-width с таким же значением. - person Praveen Kumar Purushothaman; 22.10.2019
comment
@ElaineByene Если хотите, я могу обновить свой ответ, чтобы он соответствовал выходным данным здесь: Working Fiddle< /а>. Нам просто нужно добавить max-width с тем же значением. - person Praveen Kumar Purushothaman; 22.10.2019

arrow_upward
2
arrow_downward

Я думаю, было бы проще всего добавить класс ширины столбца на основе медиа-запроса для 20%...

@media (min-width: 768px){
    .col-sm-five {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


<div class="container">
    <div class="row">
        <div class="col-6 col-sm-five">
            1
        </div>
        <div class="col-6 col-sm-five">
            2
        </div>
        <div class="col-6 col-sm-five">
            3
        </div>
         ..
     </div> 
</div>

https://www.codeply.com/go/RRp8uUraZe

person Zim    schedule 22.10.2019
comment
Быстрый вопрос. Это выглядит красиво. Но как это работает? По сравнению с моим решением, которое просто устанавливает max-width, должны ли мы также устанавливать свойство flex? - person Praveen Kumar Purushothaman; 22.10.2019
comment
Я не могу переопределить основную функцию начальной загрузки. Это создаст много проблем для других страниц. - person Elaine Byene; 22.10.2019
comment
Затем просто переименуйте col-sm-2 во что-то другое, например col-sm-five... концепция остается той же. - person Zim; 22.10.2019
comment
Спасибо. Я уже принял другой ответ, но ваше решение тоже работает. Большое спасибо. - person Elaine Byene; 22.10.2019
comment
@PraveenKumarPurushothaman - да, он работает только с максимальной шириной, но может различаться по ширине в зависимости от содержимого столбца. - person Zim; 22.10.2019

arrow_upward
0
arrow_downward

Ознакомьтесь с документацией Bootstrap о грид-системах.

Поиграйте с цифрами, чтобы получить то, что вы хотите. col-md — для планшетов и больше, col-sm — для мобильных устройств.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2 col-sm-6">
    1
  </div>
  <div class="col-md-2 col-sm-6">
    2
  </div>
  <div class="col-md-2 col-sm-6">
    3
  </div>
  <div class="col-md-2 col-sm-6">
    4
  </div>
  <div class="col-md-2 col-sm-6">
    5
  </div>
  <div class="col-md-2 col-sm-6">
    6
  </div>
  <div class="col-md-2 col-sm-6">
    7
  </div>
  <div class="col-md-2 col-sm-6">
    8
  </div>
  <div class="col-md-2 col-sm-6">
    9
  </div>
  <div class="col-md-2 col-sm-6">
    10
  </div>
</div>

person Naseki    schedule 22.10.2019
comment
Почему вы использовали col-sm-5 вместо col-sm-6? - person Praveen Kumar Purushothaman; 22.10.2019
comment
col-md-2 вместо этого создаст 6 столбцов. Я хочу создать 5 столбцов. - person Elaine Byene; 22.10.2019
comment
Хороший вопрос. Исправил это сейчас. - person Naseki; 22.10.2019
comment
В настоящее время в Bootstrap нет ничего, что помогло бы вам в этом. Вам нужно будет изменить значение гибкости столбца на 0 0 20% и задать такое же значение для максимальной ширины. - person Naseki; 22.10.2019