【发布时间】：2015-12-31 02:06:24
【问题描述】：
一切都运行良好：网格、媒体查询、文本可见性以及所有其他好东西。
我尝试在我的社交媒体图片链接中使用块状网格，但发现它根本不起作用。我浏览了项目中包含的基础文件，block-grid 类在任何地方都没有定义。我很好奇我错过了什么。是否需要在我的项目中包含一个单独的文件才能使用block-grid's？
Foundation block grid documentation
我的项目中包含的脚本和样式表：
<!-- Within Head tag -->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/terminal/jquery.terminal-0.9.2.css" />
<!-- At End of Body tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script src="js/terminal/js/jquery.terminal-0.9.2.min.js"></script>
<script src="js/terminal/js/jquery.mousewheel-min.js"></script>
我尝试做的一个例子：
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img class="img-icon" src="./img/blogger.png" /></li>
<li><img class="img-icon" src="./img/email.png" /></li>
<li><img class="img-icon" src="./img/github.png" /></li>
<li><img class="img-icon" src="./img/googleplus.png" /></li>
<li><img class="img-icon" src="./img/linkedin.png" /></li>
<li><img class="img-icon" src="./img/stackoverflow.png" /></li>
<li><img class="img-icon" src="./img/twitter.png" /></li>
</ul>
上面代码的结果只是一个普通的无序列表，每张图片都有一个单独的行。
另外，img-icon 类不会覆盖任何内容。删除此类不会使 block-grid 工作。
编辑：请注意，我通过他们的网站从website section 下载了foundation 6。您可以通过查看上面的脚本和样式表标签来查看我在项目中包含哪些文件。
编辑 2：foundation.css（由于大小而添加到 jsfiddle）：foundation.css file contents
【问题讨论】：
-
请将
foundation.scss文件的内容添加到问题中，以便我们查看您正在导入哪些组件以及如何导入它们。此外，您可以从您提供的链接下载 Foundation 的 4 个不同“版本”，因此您需要指定您使用的是哪一个。 -
嘿@ColinMarshall，我通过他们提供的链接从他们的网站部分下载了foundation 6。从下载中，收到
foundation.css和缩小版。没有对这些文件进行任何更改。我很快就会包含内容，但应该是他们网站上的默认内容 -
该页面上的下载链接会将您带到一个包含 4 个不同下载链接（针对不同版本）的页面，因此这并不能真正回答我的问题。
-
@ColinMarshall 啊抱歉没看到。我已经在 jsfiddle 中包含了我的
foundation.css文件中的内容。链接在底部的编辑中:)
标签： zurb-foundation zurb-foundation-6