Question

我正在寻找一种方法，使行以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。

Answer 1

如果您不能更改标记结构，则没有简单的方法。

一个选项是使用flex-column，但有no way to set the number of divs per 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

我可以更改Bootstrap放置列的方式吗？

1 个答案: