grid - 12 列是 Zurb Foundation 网格中的整页吗？

Question

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

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

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

Answer 1

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

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

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

$row-width: emCalc(1200);

如果您想查看使用Firebug创建多少列的任何部分。例如，在这张图片中，边栏使用 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 创建新的“行”类和新的列类（例如：“大 4 列”）。

将此代码写入您的 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);
    }
}