纯 CSS 网格默认代码将不起作用

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" 从每个 class 列表中显示它们，就好像这些点都非常小并且彼此重叠，从字面上看（不是像块一样堆叠，因为你只能看到一组点）。

<!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 指出：

Since media queries cannot be over-written, we do not include the grid system as part of pure.css. You'll have to pull it in as a separate CSS file. You can do this by adding the following tag to your page.

页面后面的说明看似相反：

Grids is part of the Pure CSS file. However, if you just want Grids and not the other modules, you can pull it down separately.

纯 CSS 网格默认代码将不起作用

Pure-CSS grid default code won't work

html

css

yui-pure-css