Can I alter the way Bootstrap places columns?

问题

I am looking for a way to make a row with 8 col-md-6 divs display in a different way than usual.

How bootstrap normally does it:

How I want it:

The number columns is dynamic so it can exceed 20 for example and be a uneven number.

Code:

<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>

I have tried: order-md-* but for this solution i need to add css since it might exceed 12 which i'd rather not. Having just 2x .col-md-6 and the foreach in there but its a bad solution. since then I have big piece of html twice.

回答1:

If you can't change the markup structure there's no simple way.

One option is to use flex-column but there is no way to set the number of divs per column so you'd have to use max-height...

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

Another option is to use CSS columns which order from top to bottom instead of left to right.

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

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

The last option is to use flexbox ordering for the specific positions...

   <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>

Demo: https://www.codeply.com/go/IczuqP9l7K

来源：https://stackoverflow.com/questions/53083332/can-i-alter-the-way-bootstrap-places-columns

标签

flexbox

bootstrap-4

smarty