Как сделать строку из 5 столбцов в Bootstrap 4 при программном добавлении столбцов

Question

Мне сложно показывать товары на главной странице магазина.

   <div class="row">

  @foreach($produts as $product)  //this is the syntax of my templating engine

   <div class="col-md-3">
  </div>


  @endforeach
 </div>

Когда я использую col-md-3 (показано 4 продукта), продукты выглядят слишком большими на экране, а когда я использую col-md-2 (показано 6 продуктов), продукты выглядят слишком маленькими. Поэтому я хочу разделить его на 5 столбцов. Дело не в том, чтобы быть перфекционистом, это очень противоречиво, это полностью разрушает дизайн. Я прочитал вопрос о том, чтобы использовать class = "col", но для меня это не работает, потому что я добавляю несколько продуктов программно. Продукты разделены на несколько «линий». Я действительно хотел, чтобы у bootstrap было 24 столбца вместо 12. Есть ли способ начальной загрузки, чтобы выполнить то, что я хочу, или мне придется запустить какой-то чистый CSS?

Answer 1

Вы можете добавить свой пользовательский класс, как этот

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-5th">
    </div>
</div>

и добавить стили CSS для минимальной ширины: 1200px

@media (min-width: 1200px) {
    .col-xl-5th {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

Answer 2

Просто добавьте это в свой CSS.

.col-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}
@media (min-width: 576px) {.col-sm-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}}
@media (min-width: 768px) {.col-md-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}}
@media (min-width: 992px) {.col-lg-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}}
@media (min-width: 1200px) {.col-xl-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}}

Вы можете использовать пользовательский класс col-20 в сочетании со стандартными cols Bootstrap4.

<div class="col-xl-20 col-lg-4 col-md-6">...

Answer 3

На самом деле вы можете использовать пустой div с классом col-md-offset-1, чтобы переместить столбец продукта 1 вправо, а затем показать продукт с помощью col-md-2.Он будет отображать 5 товаров в середине, а не в одну сторону.Ниже приведен пример..

 <div class="row">

<div class="col-md-offset-1">
<div>

@foreach($produts as $product)  //this is the syntax of my templating engine

<div class="col-md-2">
    $product
</div>


@endforeach