使用
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.
原文地址：https://www.jb51.cc/html/225443.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
