首页 文章

如何使用块网格类

提问于
浏览 次
2

一切都很好：网格，媒体查询，文本可见性，以及所有其他好东西 .

我尝试将块网格用于社交媒体图像链接，发现它根本不起作用 . 我浏览了项目中包含的基础文件， block-grid 类没有在任何地方定义 . 我'm curious what I'失踪了 . 是否有一个单独的文件需要包含在我的项目中才能使用 block-grid ？

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 类没有't overwrite anything. Removing this class doesn' t使 block-grid 工作 .

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

编辑2： foundation.css （由于大小而添加到jsfiddle）：foundation.css file contents

zurb-foundation zurb-foundation-6

2 回答

  • 0

    您链接到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>
    回复于
  • 4

    对于基础6使用该结构 . 请记住，de default max columns为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>
    回复于

相关问题