Zurb 基金会语义网格问题

【问题标题】：Zurb Foundation Semantic Grid TroubleZurb 基金会语义网格问题
【发布时间】：2012-10-25 14:29:07
【问题描述】：

Zurb Foundation 很棒，除了语义网格之外的一切都很好。我安装了 zurb-foundation gem（最新的公开版本）；从 Zurb 官方网站到 index.html 和 app.scss 的语义网格复制粘贴标记示例和 Scss 示例，它工作不正确：页面对“中等景观”和较低格式没有响应，并且当我调整页面大小时 - 滚动条是出现。我在https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Yjh_9f21foQ 上发现了同样的问题，这个页面 - http://szabinho.com/zurb/ 很好地说明了我在说什么。大家能不能给我看一下 Zurb 的语义网格的实际例子。它是一个非常强大和酷的框架，但有一件事阻止了我使用——这个烦人的麻烦。希望你能帮助我。谢谢！

【问题讨论】：

如果您想要一个方便的前端框架，您可能会发现twitter.github.com/bootstrap 是一个不错的尝试替代方案。它有更多的功能。
感谢您的建议，但对我来说使用带有 sass 和语义网格维护的框架很重要。

标签： grid semantic-markup zurb-foundation

【解决方案1】：

在使用 Sass 和 mixins 编译我的语义网格时，我遇到了类似的问题。

我注意到 .row 设置了最小宽度：

.row {
  width: 960px;
  max-width: 100%;
  min-width: 768px;
  margin: 0 auto;
}

所以这意味着所有行的宽度至少为 768 像素。您可以像这样在 app.css（或者 scss 是您正在使用 SASS）中覆盖此设置：

.row {
  min-width: 0!important;
}

我还注意到，只有在使用 @include outerRow() 和 innerRow() 之类的 SASS 混合时才会出现此问题，当我重新使用 <div class="row"><div class="twelve columns"> 时，我没有收到此错误。

【讨论】：