Могу ли я изменить способ, которым Bootstrap размещает столбцы? - PullRequest
Новая
       11

Могу ли я изменить способ, которым Bootstrap размещает столбцы?

0 голосов
/ 31 октября 2018

Я ищу способ сделать строку с отображением 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 дважды.

1 Ответ

0 голосов
/ 31 октября 2018

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

Один из вариантов - использовать flex-column, но невозможно установить количество делений на столбец , поэтому вам придется использовать 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

...