Question

我在http://jobajoba.org发布了一个测试网站，其中显示了一些基础4元素。

我正在使用vanilla开箱即用的基础4框架，但是在列表中显示为子弹项目的灯箱拇指有问题（它们应该在行中类似于页面上显示的“块网格”示例）。

我无法弄清楚我做错了什么......请注意，页面上的其他内容似乎无法正常使用。

编辑：

我忘记了这个问题，但在我发布这个问题大约一个月后，Zurb向我表示他们使用了一个块格来创建效果。这样的事情对我有用：

<div>
    <ul class="large-block-grid-4 small-block-grid-2" data-clearing>
        <li>
            <a href="http://foundation.zurb.com/docs/img/demos/demo1.jpg" class="th">
           <img src="http://foundation.zurb.com/docs/img/demos/demo1-th.jpg" data-caption="THIS IS CAPTION 1">
            </a>
        </li>
        <li>
          <a href="http://foundation.zurb.com/docs/img/demos/demo2.jpg" class="th">
            <img src="http://foundation.zurb.com/docs/img/demos/demo2-th.jpg" data-caption="THIS IS CAPTION 2">
          </a>
        </li>
        <li>
          <a href="http://foundation.zurb.com/docs/img/demos/demo3.jpg" class="th">
            <img src="http://foundation.zurb.com/docs/img/demos/demo3-th.jpg" data-caption="">
          </a>
        </li>
        <li>
          <a href="http://foundation.zurb.com/docs/img/demos/demo4.jpg" class="th">
            <img src="http://foundation.zurb.com/docs/img/demos/demo4-th.jpg" data-caption="">
          </a>
        </li>
      </ul>
    </div>

Answer 1

Foundation的文档示例使用自定义docs.css文件： http://foundation.zurb.com/docs/assets/docs.css

标题/ *清除样式* /下的清除灯箱样式与香草下载中包含的样式完全相同。但是，该文件还有一个专门用于文档示例的额外部分。

/* Clearing Docs */
.clearing-thumbs { list-style: none; }
.clearing-thumbs li { float: left; margin-right: 10px; }

将这些规则添加到您自己的css文件中应该提供您正在寻找的布局。

基础4，清除灯箱拇指无法正确显示

1 个答案: