HTML/CSS：財団スタイルシートのリンクがありません

私のHTMLページにリンクするための基礎フレームワークを取得しようとしていますが、グリッドシステムを使用しようとすると何もしません。私は、いくつかの異なるチュートリアルを見て、私が物事を正しく結びつけていることを確認しましたが、なぜそれが効かないのかまだ分かりません。ここに私の編集者のイメージと並べて表示されます。私のindex.html、cssフォルダ、およびjsフォルダはすべて同じディレクトリに含まれています。 Editor and Display HTML/CSS：財団スタイルシートのリンクがありません

また、私のコードを取り付ける：

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"/> 
    <meta name="viewport" content="device=device-width, initial-scale=1.0"/> 
    <title>Foundation | Welcome</title> 
    <link rel="stylesheet" href="css/foundation.min.css"/> 
    <link rel="stylesheet" href="css/app.css"/> 
    </head> 

    <body> 
    <div class="row"> 
     <div class="large-4 columns" style="background-color: lightblue"><p>Why u wont work.</p></div> 
     <div class="large-8 collumn" style="background-color: lightsalmon">Not displaying a grid system.</div> 
    </div> 

    <!-- include before </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> 
    </body> 
</html>

出典

2017-07-13 ChillyPenguin672

まず、入力した文字がcollumnで、column（またはcolumns）である必要があります。

第2に、適切なグリッドを使用していることを確認してください。Foundation 6.4にはXY（デフォルト）、Float、Flexの3つのグリッドがあります。

サンプルのコードは "従来の"浮動小数点グリッドに属していますが、この新しいバージョンのデフォルトグリッド（6月27日以降）はXYグリッドです。だから、あなたは2つのオプションがあります。

を変更し、新たなXYグリッドに応じて、あなたのマークアップが（http://foundation.zurb.com/sites/docs/xy-grid.htmlに見てみましょう）
変更フロートグリッドを使用するためのフレームワークを、今、これはあなたがフレームワークをダウンロードした方法によって異なります最初の場所;プリコンパイルされたパッケージを使用した場合、カスタマイズするにはhttp://foundation.zurb.com/sites/download.html/#customizeFoundationに行ってください（基本的にフロートグリッドを選択して新しいパッケージをダウンロードするだけです）。 SASSバージョンを使用している場合は、app.scssにアクセスし、@include foundation-grid;と表示されている行にコメントを削除し、@include foundation-xy-grid-classes;とコメントしてからフレームワークを再構築してください。

これが役に立ちます。

出典

2017-07-13 21:08:45

助けてくれてありがとう！ – ChillyPenguin672

あなたは2列目の上のタイプミスを持っています。 'large-8 column'は 'large-8 columns'（1つ少ない 'l'と1 ''）を読み込む必要があります。代わりに

<div class="large-8 collumn" style="background-color: lightsalmon">Not displaying a grid system.</div>

の

は持っている：参考

<div class="large-8 columns" style="background-color: lightsalmon">Not displaying a grid system.</div>

は、ここで働いpenです。

出典

2017-07-13 03:14:26

私はこの問題を解決しようとしていましたが、それを逃してしまったに違いありません。しかし、入力ミスを修正しても、両方の要素がブロック項目として表示されます。グリッドシステムはまだ使用できませんが、スタイルシートをリンクするのは間違っていますか？ – ChillyPenguin672

Google Chromeでインスペクタを開いてみてください（ctrl-shift-iだと思います）。私は他のブラウザ（f12多分???）でこれを行う方法に慣れていません。とにかく、インスペクタのコンソールを使用して、あなたのcssが読み込まれているかどうかを確認します（問題がある場合は、赤い色の線がいくつか表示されます）。 –

よろしいですが、ファイルが見つかりません。私はあなたがなぜそれらが見つからないのかについての明らかな誤りを見ることができるとは思わない？それは私のjavascriptファイルを見つけることができないが、それは私のスタイルシートファイルの読み込みを持っていないと言うことが怖いです。 – ChillyPenguin672

HTML/CSS：財団スタイルシートのリンクがありません

答えて

関連する問題