代码之家 › 专栏 › 技术社区 › Mike Lammers

我可以改变引导程序放置列的方式吗?

smarty bootstrap-4 flexbox

0

Mike Lammers · 技术社区 · 7 年前

我正在寻找一种方法,使一行8列md-6分频显示在一个不同的方式比平常。

我多么想要它:

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

订购md-*但是对于这个解决方案,我需要添加css,因为它可能超过12,我不希望超过12。只有2x.col-md-6和foreach,但这是一个糟糕的解决方案。从那以后,我两次使用了一大块html。

1 回复 | 直到 7 年前

1

Carol Skelly 7 年前

如果您不能更改标记结构,那么没有简单的方法。

是用 flex-column no way to set the number of divs per column 所以你必须使用最大高度。。。

@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