未应用基础6柱轴网类
未应用基础6柱轴网类
提问于 2017-10-03 07:17:14
我正在尝试使用foundation 6开始一个简单的项目。我非常简单的html是：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="row">
<div class="large-2 columns">
<h1>test</h1>
</div>
<div class="large-2 columns">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>但是，在测试网站时，无法应用列类，网格也不能正常工作。我是不是漏掉了什么？
回答 2
Stack Overflow用户
发布于 2017-10-03 07:25:34
除非您使用的是< foundation 6，否则需要使用XY网格，因为旧的浮动网格已被弃用。
看看这个：https://foundation.zurb.com/sites/docs/xy-grid.html
使用XY-grid时，您的html将如下所示：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="grid-x">
<div class="cell large-2">
<h1>test</h1>
</div>
<div class="cell large-2">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>Stack Overflow用户
发布于 2017-10-07 22:47:28
如果你访问download page，你可以在左栏的“网格”下选择“浮动网格”，然后下载自定义版本。您不必使用XY栅格。
如果你这样做，你现有的网格标记就可以工作了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46535016
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号