Могу ли я изменить способ размещения столбцов в bootstrap?

Я ищу способ сделать строку с отображением 8 div-ов col-md-6 другим способом, чем обычно.

Как это обычно происходит при загрузке:

enter image description here

Как я этого хочу:

enter image description here

Число столбцов является динамическим, поэтому оно может превышать 20, например, и быть нечетным числом.

Код:

<div class="row">
   {foreach from=$item.Opties|default:array() name=optie item=optie key=key}
      <div class="col-md-6">
         test {$optie@iteration} (normally there is more code in here)
      </div>
   {/foreach}
</div>

Я пытался: order-md- *, но для этого решения мне нужно добавить css, поскольку он может превышать 12, чего я бы не хотел. Имея только 2x .col-md-6 и foreach, но это плохое решение. с тех пор у меня дважды есть большой кусок html.

Почему бы вам не изменить свой for-each на цикл for с i=i+2 до своего рода сделки с $item.length/2

Cody G 31.10.2018 13:32
0
1
32
1

Ответы 1

Если вы не можете изменить структуру разметки, нет простого способа.

Один вариант должен использовать flex-column, но есть нет возможности установить количество div на столбец, поэтому вам придется использовать max-height ...

@media(min-width:768px) {
    .mh {
       flex-direction: column;
       max-height:140px;
    }
}

Другой вариант - использовать столбцы CSS, которые располагаются сверху вниз, а не слева направо.

.row.columns {
    column-count: 2;
    column-gap: .1rem;
    display:block;
}

.columns > .col-md-6 {
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

последний вариант должен использовать порядок flexbox для определенных позиций ...

   <div class="row">
        <div class="col-md-6 order-1">
            <div class="border p-1">1</div>
        </div>
        <div class="col-md-6 order-3">
            <div class="border p-1">2</div>
        </div>
        <div class="col-md-6 order-5">
            <div class="border p-1">3</div>
        </div>
        <div class="col-md-6 order-7">
            <div class="border p-1">4</div>
        </div>
        <div class="col-md-6 order-2">
            <div class="border p-1">5</div>
        </div>
        <div class="col-md-6 order-5">
            <div class="border p-1">6</div>
        </div>
        <div class="col-md-6 order-4">
            <div class="border p-1">7</div>
        </div>
        <div class="col-md-6 order-8">
            <div class="border p-1">8</div>
        </div>
    </div>

Демо: https://www.codeply.com/go/IczuqP9l7K

Другие вопросы по теме