我可以更改Bootstrap放置列的方式吗? [英] Can I alter the way Bootstrap places columns?

问题描述

我正在寻找一种方法，使行以8 col-md-6 div的显示方式以不同于平常的方式显示.

引导程序通常如何执行:

我想要的方式:

数字列是动态的，因此它可以超过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.

解决方案

如果您无法更改标记结构，则没有简单的方法.

一种选择是使用flex-column，但是有

演示: https://www.codeply.com/go/IczuqP9l7K

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.

解决方案

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

这篇关于我可以更改Bootstrap放置列的方式吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！