我正在使用带有 CSS 的 Zurb Foundation 和另一个使用 SASS 的网站上进行 2 次响应式重建。我在 SASS 版本中无法并排显示列时遇到问题，它们似乎在每个屏幕尺寸下都是全宽的。
对于 SASS 重建，我已将所有文件复制到由命令行创建的新目录结构中。我认为这将是移植我的旧文件，将所有内容重新组合在一起，在命令行中查看 sass 文件夹，输出 app.css 并且它会工作的情况。出于某种原因，除了列之外，一切都很好。
CSS 版本正是我希望网站的外观 - 有没有人有任何建议？
提前感谢您的帮助。
【问题讨论】：
标签： grid sass zurb-foundation
如果不查看您的 SASS，很难确切地说出发生了什么，但您的 app.css 中没有定义 medium-4。您确实定义了 small-12 和 large-4 类。一旦你定义了medium-# 类，你的代码应该可以正常工作。
agconti 的answer 确实解决了这个问题，但请记住“Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary”。一旦你定义了medium-# 类，你就可以开始了。没有理由添加 large-#、xlarge-# 或 xxlarge-#，只要您希望它们看起来像 medium-#。
希望对你有帮助。
【讨论】：
您仅指定 small (iphone) 和 medium (平板电脑) 视图，但您从 large (桌面) 视图查看它。
将large-4 添加到您的列中，使它们在桌面视图中工作，如下所示：
<div class="small-12 medium-4 large-4 columns">
<h2>Creditlook Lite</h2>
<div class="sprite icon1"> </div>
<p>Free entry-level, self-managed service to get you started.</p>
</div>
然后你的 div 会像你的照片一样响应。
【讨论】：