html - Foundation 5 div 样式

Question

我正在使用 Foundation 5 创建网站。这是主要想法:我有一个深灰色的 body 背景，我想要两种类型的“帖子” - 一种是红色背景的特色帖子，另一种是白色背景的普通帖子。这是我为“post”div 准备的内容。我想要两个不同的 div，它们具有相同的 small-9 small-centered columns 属性。

<div class="row">
  <div class="small-9 small-centered columns">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur laudantium unde quidem? In, id, voluptatum cumque quos quibusdam fugiat quas nihil odit porro reprehenderit delectus vero praesentium quidem autem!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit commodi vel quibusdam non incidunt error doloribus. Eius, architecto, reiciendis omnis facilis minima autem amet fuga? Voluptatum architecto vel numquam id.
  </div>
</div>

我应该如何在我的 style.css 文件中继续创建两个这样的 div？我的意思是，当我开始在不使用 Foundation 的情况下编写我的 css 时，我只有一个 .post div 和一个带有边框、背景等的 .featured_post。我现在正在尝试过渡到 Foundation，但我被卡住了。任何想法，将不胜感激。我想我的问题是:我应该在我的自定义样式表中设计 small-9 small-centered columns 还是什么？

谢谢

Answer 1

使用 foundation 的最佳实践方法是将它的 mixins 与您自己的 CSS 类一起使用，以便您的标记尽可能保持语义。

因此，保留您现有的样式并添加如下内容:

@media #{$small-up} {
  .posts {
    @include grid-row($behavior: nest);
    .post,
    .featured_post {
      @include grid-column($columns:9, $center:true);
    }
  }
}

文档相当不错:http://foundation.zurb.com/docs/components/grid.html