CSS Foundation 在容器中使用不同的列数

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

从这个基金会论坛中得到启发 post http://foundation.zurb.com/forum/posts/22254-change-total-columns-on-small-only

您可以为这种类型的行创建自定义 class：

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

CSS Foundation 在容器中使用不同的列数

CSS Foundation Use Different Column Count in Container

css

zurb-foundation