HTML/CSS:基础样式表不会链接 [英] HTML/CSS: Foundation stylesheet wont link

查看：33
本文介绍了HTML/CSS:基础样式表不会链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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:

<!-- 包含在 </body> 之前标签 --><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></html>

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

推荐答案

首先，你有一个错字，上面写着collumn，应该是column(或<代码>列).

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

其次，请确保您使用的是正确的网格，Foundation 6.4 有 3 个可用的网格:XY(默认)、Float 和 Flex.

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

您示例中的代码属于传统"浮动网格，而这个新版本(自 6 月 27 日起)中的默认网格是 XY 网格.所以你有两个选择:

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:

  1. 根据新的 XY 网格更改标记(查看 http://foundation.zurb.com/sites/docs/xy-grid.html )
  2. 更改框架以使用浮动网格，现在这取决于您首先如何下载框架；如果你使用了预编译包，你应该去http://foundation.zurb.com/sites/download.html/#customizeFoundation 进行自定义(基本上只需选择 Float Grid 并下载一个新包)；如果您使用的是 SASS 版本，请转到 app.scss 删除显示 @includefoundation-grid; 的行的注释，并使用 @include 注释该行foundation-xy-grid-classes;，然后重建框架.
  1. Change your markup according to the new XY grid (take a look to http://foundation.zurb.com/sites/docs/xy-grid.html )
  2. 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.

希望这会有所帮助.

这篇关于HTML/CSS:基础样式表不会链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆