HTML/CSS：基础样式表不会 link

Question

我正在尝试将 link 的基础框架添加到我的 HTML 页面，但是当我尝试使用网格系统时，它没有做任何事情。我已经查看了几个不同的教程，以确保我 link 正确地进行了操作，但我仍然无法弄清楚为什么它不起作用。这是我的编辑器的图像，并排显示。我的 index.html、css 文件夹和 js 文件夹都包含在同一个目录中。 Editor and Display

同时附上我的代码：

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

Answer 1

您的第二列中有错字。 'large-8 collumn' 应该读作 'large-8 columns'（少一个 'l' 和一个 's'）。

而不是

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

Answer 2

首先，你打错了，上面写着collumn，应该是column（或columns）。

其次，请确保您使用的是正确的网格，Foundation 6.4 有 3 个网格可用：XY（默认）、浮动和弹性。

您示例中的代码属于 "traditional" 浮动网格，而此新版本（自 6 月 27 日起）的默认网格是 XY 网格。所以你有两个选择：

根据新的 XY 网格更改标记（查看 http://foundation.zurb.com/sites/docs/xy-grid.html）
更改框架以使用Float Grid，现在这取决于您首先如何下载框架；如果你使用预编译包，你应该去http://foundation.zurb.com/sites/download.html/#customizeFoundation自定义（基本上就是选择Float Grid并下载一个新的包）；如果您使用的是 SASS 版本，请转到 app.scss 删除显示 @include foundation-grid; 的行的注释，并用 @include foundation-xy-grid-classes; 注释该行，然后重建框架。

希望对您有所帮助。

HTML/CSS：基础样式表不会 link

HTML/CSS: Foundation stylesheet wont link

html

css

zurb-foundation