基础5 - 我如何获得八列网格

时间:2015-03-29 14:35:45

标签: html css zurb-foundation-5

如何在基础5中实现八列网格?

我目前有以下

<div class="container">
    <div class="row">
        <div class="large-1 columns">Today</div>
        <div class="large-1 columns">Tomorrow</div>
        <div class="large-1 columns">Wednesday</div>
        <div class="large-1 columns">Thursday</div>
        <div class="large-1 columns">Friday</div>
        <div class="large-1 columns">Saturday</div>
        <div class="large-1 columns">Sunday</div>
        <div class="large-1 columns">Monday</div>
     </div>
</div>

容器宽度= 1200px

1 个答案:

答案 0 :(得分:0)

正如其中一条评论指出的那样,如果您想拥有自定义数量的列,则需要使用Sass。

您可以按照Zurb的教程让Sass和基金会工作:http://foundation.zurb.com/docs/sass.html

我强烈建议使用Foundation with Sass,因为它可以更轻松地进行自定义。如果你不熟悉Sass,那将是一个学习曲线,但绝对值得! http://sass-lang.com/guide

让Sass工作后,请按照此处的示例代码进行操作:http://foundation.zurb.com/docs/components/grid.html以使您的自定义列号正常工作。

.custom-row-class {
  @include grid-row();
  .custom-column-class {
    @include grid-column(8);
  }
}