2

一切都运行良好：网格、媒体查询、文本可见性以及所有其他好东西。

我尝试为我的社交媒体图片链接使用块状网格，但发现它根本不起作用。我浏览了项目中包含的基础文件，并且block-grid没有在任何地方定义类。我很好奇我错过了什么。是否有一个单独的文件需要包含到我的项目中才能使用block-grid's？

基础块网格文档

我的项目中包含的脚本和样式表：

<!-- 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起作用。

编辑：请注意，我从网站部分通过他们的网站下载了基础 6 。您可以通过查看上面的脚本和样式表标签来查看我在项目中包含的文件。

编辑2：（foundation.css由于大小而添加到jsfiddle）：foundation.css文件内容

4

2 回答 2

4

您链接到 Foundation 5 块网格文档，但您使用的是 Foundation 6。在 Foundation 6 中，块网格与常规网格相结合。

Foundation 5 的方块网格已合并到主网格中。添加格式为 [size]-up-[n] 的类以更改行内所有列的大小。默认情况下，您可以与块网格一起使用的最大列数为 6。

资料来源： http: //foundation.zurb.com/sites/docs/grid.html#block-grids

例子：

<div class="row small-up-1 medium-up-2 large-up-4">
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
</div>
于 2015-12-31T03:02:48.003 回答
0

对于基础 6，请使用该结构。请记住，默认最大列数为 6。

<div class="row small-up-1 medium-up-2 large-up-4">
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
</div>
于 2016-01-07T20:54:24.813 回答