CSS Foundation在Container中使用不同的列数

Question

我使用的是ZURB Foundation软件包，它依赖于总共12列的网格系统。我不想改变整个项目的总列数，而只想改变一个元素的内容。如何更改说<row>使用8列计数而不是12列计数？

Answer 1

您可以使用嵌套行来实现8列结构。将行划分为两列，然后将列划分为包含在行内的4列。

<div class="row">
    <div class="large-6 columns">
        <div class="row">
            <div class="large-3 columns">
                1
            </div>
            <div class="large-3 columns">
                2
            </div>
            <div class="large-3 columns">
                3
            </div>
            <div class="large-3 columns">
                4
            </div>
        </div>
    </div>
    <div class="large-6 columns">
        <div class="row">
            <div class="large-3 columns">
                5
            </div>
            <div class="large-3 columns">
                6
            </div>
            <div class="large-3 columns">
                7
            </div>
            <div class="large-3 columns">
                8
            </div>
        </div>
    </div>
</div>

Codeply

Answer 2

从基金会论坛帖子中获取提示 http://foundation.zurb.com/forum/posts/22254-change-total-columns-on-small-only

您可以为此类行创建自定义类：

.custom-row {
  @media #{$small-up} {
    $total-columns: 4 !global;
    @include grid-html-classes($size:small);
  }
}