Question

我刚刚开始使用Foundation 4的网格系统，我的印象是12列布局是整个页面，但是当我打开Foundation并看到他们的例子时我很困惑。这是图片 Foundation Open screen

网格下面的部分说这是一个12列的部分，所以我感到困惑的是“入门”侧边栏。

12列部分的宽度是多少？
什么是“入门”侧边栏？（多少列？）

Answer 1

基础4中12列部分的默认宽度为1000px，但您可以在_variable.scss文件中更改它。找到这一行：

// $row-width: emCalc(1000);

更改'1000'（例如：1200）然后删除注释并编译Sass文件：

$row-width: emCalc(1200);

如果您想查看任何使用Firebug列创建的部分。例如，在this picture中，使用3列（大3）作为侧边栏。

我为网格设计写了一个基础的例子：

<div class="row">

    <div class="large-9 columns">
        <div class="row">
            <div class="large-12 columns">
                Left section with 9 columns and two row.
                First row with one section(12 columns)
                Second row with 2 section(each 6 columns)
            </div>
        </div>
        <div class="row">
            <div class="large-6 columns">
                6 columns
            </div>
            <div class="large-6 columns">
                6 columns
            </div>
        </div>
    </div>

    <div class="large-3 columns">
        Right section with 3 columns
    </div>

</div>

您还可以使用sass mixin创建新的“行”类和新列类（例如：'large-4 columns'）。

将此代码写入HTML文件：

<div class="your_custom_row">
    <div class="your_custom_columns_4">
        Define 'your_custom_row' in your sass file: @include grid-row;
        'your_custom_row' equal to 'row columns'

        Define 'your_custom_columns_4' in your sass file: @include grid-column(4);
        'your_custom_columns_4' equal to 'large-4 columns'
    </div>
    <div class="your_custom_columns_8">
        Define 'your_custom_columns_8' in your sass file: @include grid-column(8);
        'your_custom_columns_8' equal to 'large-8 columns'
    </div>
</div>

<div class="row">
    <div class="large-4 columns">
        'large-4 columns' equal to 'your_custom_columns_4'
    </div>
    <div class="large-8 columns">
        'large-8 columns' equal to 'your_custom_columns_8'
    </div>
</div>

并将此代码写入您的sass文件中：

.your_custom_row {
    @include grid-row;
    .your_custom_columns_4 {
        @include grid-column(4);
    }
    .your_custom_columns_8 {
        @include grid-column(8);
    }
}

Zurb Foundation网格中有12列是整页吗？

1 个答案: