Question

我正在尝试将基础框架链接到我的HTML页面，但是当我尝试使用网格系统时它没有做任何事情。我已经看了几个不同的教程，以确保我正确连接的东西，但我仍然无法弄清楚为什么它不会工作。这是我的编辑器的图像并排显示。我的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'应该是'大8列'（少一个'l'和一个''）。

而不是

<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（默认），Float和Flex。

您的示例中的代码属于＆＃34;传统＆＃34; Float Grid，而这个新版本的默认网格（自6月27日起）是XY Grid。所以你有两个选择：

根据新的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：基础样式表不会链接

2 个答案: