HTML/CSS: Foundation stylesheet wont link

问题

I am trying to get the foundation framework to link to my HTML page but when I try to use the grid system it does not do anything. I have been looked at a few different tutorials to make sure that I am linking things correctly but I still can not figure out why it wont work. Here is an image of my editor and display side by side. My index.html, css folder, and js folder are all contained within the same directory. Editor and Display

Also attaching my code:

<!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>

回答1:

First of all, you have a typo, it says collumn, should be column (or columns).

Second, please make sure you're using the proper grid, Foundation 6.4 has 3 grids available: XY (default), Float and Flex.

The code in your sample belongs to the "traditional" Float Grid, while the default grid in this new version (since June 27th) is XY Grid. So you have two options:

Change your markup according to the new XY grid (take a look to http://foundation.zurb.com/sites/docs/xy-grid.html )
Change the framework to use the Float Grid, now this depends on how you downloaded the framework in first place; if you used the precompiled package, you should go to http://foundation.zurb.com/sites/download.html/#customizeFoundation to customize (basically just selecting the Float Grid and download a new package); if you used the SASS version, go to app.scss remove comment to the line where shows @include foundation-grid;, and comment the one with @include foundation-xy-grid-classes;, then rebuild framework.

Hope this helps.

回答2:

You have a typo on in your second column. 'large-8 collumn' should read 'large-8 columns' (one less 'l' and one 's').

Instead of

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

Have:

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

For reference, here is a working pen.

来源：https://stackoverflow.com/questions/45070758/html-css-foundation-stylesheet-wont-link

标签

html

css

zurb-foundation