Question

我只是想尝试使用基础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>

但是，在测试网站时，列类未应用，并且网格无法正常工作。有什么我想念的吗？

Answer 1

除非您正在使用＆lt;基础6，您需要使用XY网格，因为旧的浮动网格已被弃用。

检查出来：https://foundation.zurb.com/sites/docs/xy-grid.html

使用XY网格你的html看起来像这样：

bit pos           1 1 1 1  1 1
                  5 4 3 2  1 0 9 8  7 6 5 4  3 2 1 0  

(val)                   1        2        3        4
x               = 0 0 0 1  0 0 1 0  0 0 1 1  0 1 0 0

n = 2
n << 2 = 4

(val)                   0        1        2        3
x >> 4          = 0 0 0 0  0 0 0 1  0 0 1 0  0 0 1 1

(val)                   0        0        0        3
(x >> 4) & 0x0f = 0 0 0 0  0 0 0 0  0 0 0 0  0 0 1 1

Answer 2

只是想补充一点，您仍然可以在Foundation 6中使用浮动网格。如果您访问download page，可以在左栏中的“网格”下选择“浮动网格”并下载该自定义版本。您不必使用XY网格。

如果您这样做，您现有的网格标记将起作用。

基础6列网格类未应用

2 个答案: