Zurb数据清除在小块网格上不工作

Zurb Data clearing not working on small block grid

本文关键字：网格 工作 数据 清除 Zurb      更新时间：2023-09-26

我目前正在尝试添加一个清除灯箱到一个嵌套的小盒子网格，但灯箱根本不加载。页面继续加载，就好像我没有做任何更改一样。我已经通过并尝试了一些CSS解决方案，但无济于事。我还确保调用了正确的JS文件。我正在使用基础5.3，我已经添加了我当前的代码。如有任何指导，不胜感激。

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
 <div class="row">
  <div class="large-6 large-centered columns">
      <h2>Our Featured Artists</h2>
            <p>Each Featured Artist has an  opportunity to speak at the conference to share his or her vision, perspective,  and techniques with conference attendees. It is truly an honor to be a CAC  Featured Artist and many past students artists who were featured at CAC have  gone on to brilliant careers in art.</p>
            <ul class="small-block-grid-3 clearing-thumbs" data-clearing>
              <li class="clearing-feature"><a href="img/big-bell.jpg"><img src="img/thumbs/bellingham.jpg" alt="Bellingham." class="th"></a></li>
              <li><a href="img/big-ferr.jpg"><img src="img/thumbs/ferrar.jpg" alt="Ferrar. " class="th"></a></li>
              <li><a href="img/big-gold.jpg"><img src="img/thumbs/goldwynn-post.jpg" alt="Goldwynn-Post." class="th"></a></li>
              <li><a href="img/big-harr.jpg"><img src="img/thumbs/harrod.jpg" alt="Harrod. " class="th"></a></li>
              <li><a href="img/big-jer.jpg"><img src="img/thumbs/jerome.jpg" alt="Jerome. " class="th"></a></li>
              <li><a href="img/big-larue.jpg"><img src="img/thumbs/larue.jpg" alt="LaRue. " class="th"></a></li>
              <li><a href="img/big-rew.jpg"><img src="img/thumbs/rewington.jpg" alt="Rewington. " class="th"></a></li>
              <li><a href="img/big-smith.jpg"><img src="img/thumbs/smith.jpg" alt="Smith. " class="th"></a></li>
              <li><a href="img/big-ta.jpg"><img src="img/thumbs/ta.jpg" alt="Ta. "          class="th"></a></li>
            </ul>
    </div>
    </div>
   <script>
   document.write('<script src=' +
   ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
   '.js><'/script>')
   </script>
   <script src="js/foundation.min.js"></script>
   <script>
   $(document).foundation();
   </script>
   </body>

必须在foundation.js之后加载foundation.clearing.js 

<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
参考链接

显示In order to get Clearing to build itself properly, you'll need to have JavaScript properly included.

相关文章：