我为Foundation中的一个页面写了以下内容。我重新定位了一些标准文件和文件夹,因此修改了文件路径。
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="../css/foundation.css">
<link rel="stylesheet" href="../css/app.css">
</head>
<body>
<!--
<div class="row">
<ul class="pagination" role="navigation">
<li class="menu-text">Understood</li>
<li class="disabled">First</li>
<li class="disabled">Previous</li>
<li class="disabled">Next</li>
<li class="disabled">Last</li>
</ul>
</div>
-->
<div class="row">
<div class="large-4 columns">
<!--
<ul class="menu vertical">
<li><button class="button">Home</button></li>
<li><button class="button">Map</button></li>
<li><button class="button">1. Prehistory</button></li>
<li><button class="button">2. Ancient</button></li>
<li><button class="button">3. Classical</button></li>
</ul>
-->
<p>First Bunch</p>
</div>
<div class="large-8 columns">
<p>Text</p>
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/vendor/what-input.js"></script>
<script src="../js/vendor/foundation.js"></script>
<script src="../js/app.js"></script>
</body>
</html>
我留下了一些注释,因为当我在注释中呈现代码时,除了应该呈现列的内容之外,它都有效。但是,我正在慢慢努力学习如何制作菜单栏,并且包含列的行应该是第一次尝试 - 所以我希望第一个<div class="large-4 columns">
包含左边的菜单栏,并且第二个div
包含页面正文。但是,就像现在一样,这就是公正的
第一堆
文本
而不是将它们放在左列和右列中。据我所知,我正确地遵循这些说明:
https://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html
我也在我的台式电脑上这样做,所以我不认为应该将屏幕尺寸视为大而不是。我在Linux机器上使用最新版本的Firefox来查看它,而开发人员控制台没有显示任何错误。
看起来你的css文件没有加载,试试这个<link rel="stylesheet" href="css/foundation.css" />
并删除../
部分。
我希望它能起作用:-)
最好的问候,乔治
与基础文档相比,您的代码似乎是正确的,我无法找到有关您似乎正在使用的Foundation版本的网格实现的不同文档。
我能想到的是,如果您确定使用与您共享的链接相同的基础版本(5.5.3)。 latest version docs表示,Foundation 6默认禁用布局网格。如果您不需要支持IE 10,它还建议使用XY网格。
这看起来像这样:
<div class="grid-x">
<div class="cell large-4">First element</div>
<div class="cell large-6">Next element</div>
</div>
干杯,