財団6列のグリッドクラスは

私は単純なプロジェクトを取得しようとしていますが、私の非常に単純なHTMLである基礎6を使用して開始適用されていない：ウェブサイトをテストするときしかし、財団6列のグリッドクラスは

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="x-ua-compatible"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Foundation for Sites</title> 
     <link rel="stylesheet" href="css/foundation.min.css"> 
    </head> 
    <body> 

     <div class="row"> 
      <div class="large-2 columns"> 
       <h1>test</h1> 
      </div> 
      <div class="large-2 columns"> 
       <h1>test2</h1> 
      </div> 
     </div> 

     <script src="js/vendor/jquery.js"></script> 
     <script src="js/vendor/what-input.js"></script> 
     <script src="js/vendor/foundation.min.js"></script> 
     <script> 
      $(document).foundation(); 
     </script> 
    </body> 
</html>

、列クラスではありません適用され、グリッドが動作していないようになっています。私が紛失しているものはありますか？

出典

2017-10-02 Daniel

<ファンデーション6を使用していない限り、古い浮動小数点グリッドは廃止されているため、XYグリッドを使用する必要があります。

チェックこのアウト：https://foundation.zurb.com/sites/docs/xy-grid.html

あなたのhtmlはXYグリッドを使用して次のようになります。

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="x-ua-compatible"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Foundation for Sites</title> 
     <link rel="stylesheet" href="css/foundation.min.css"> 
    </head> 
    <body> 

     <div class="grid-x"> 
      <div class="cell large-2"> 
       <h1>test</h1> 
      </div> 
      <div class="cell large-2"> 
       <h1>test2</h1> 
      </div> 
     </div> 

     <script src="js/vendor/jquery.js"></script> 
     <script src="js/vendor/what-input.js"></script> 
     <script src="js/vendor/foundation.min.js"></script> 
     <script> 
      $(document).foundation(); 
     </script> 
    </body> 
</html>

出典

2017-10-02 23:25:33 voyager

ちょうど場合、あなたはまだ財団6にフロートグリッドを使用することができることを追加したいですdownload pageにアクセスする場合は、左側の列の "Grid"の下にある "Float Grid"を選択し、そのカスタムビルドをダウンロードすることができます。 XYグリッドを使用する必要はありません。

これを行うと、既存のグリッドマークアップが機能します。

出典

2017-10-07 14:47:27 mleleigh

財団6列のグリッドクラスは

答えて

関連する問題