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

发布时间：2020-12-14 18:42:32 所属栏目：资源来源：网络整理

导读：使用 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

使用 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>

我的完整代码可以在这里找到.在浏览器中查看以下代码时,三组点看起来好像是堆叠在一起,或者是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>

解决方法

由于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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!