Question

使用Pure grids，我的网站没有正确回复，因此我尝试将默认的响应式网格代码复制并粘贴到我的文件中，但仍无法正常运行。

这是他们网站上列出的默认代码：

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

我的完整代码可以在这里找到。 W 在浏览器中查看以下代码时，三组点看起来好像是堆叠在一起，或者是100％列宽。删除“pure-u-1”从每个班级列表中显示它们就好像这些点都非常小并且彼此叠加，字面上（不像块一样堆叠，因为你只能看到一组点）。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>B&W Vending</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>

<body>

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

</body>
</html>

Answer 1

由于pure-css网站上的说明冲突，我有点困惑，我自己想出来了。一旦我包含以下样式表，就可以了。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

在pure-css grids page处注明：

由于媒体查询无法覆盖，因此我们不会将网格系统作为pure.css的一部分。您必须将其作为单独的CSS文件提取。您可以通过在页面中添加以下标记来完成此操作。

稍后在页面中，它表示看似相反的指示：

Grids是Pure CSS文件的一部分。但是，如果您只想要网格而不是其他模块，可以单独下载。

Pure-CSS网格默认代码不起作用

1 个答案: