gpt4 book ai didi

layout - MDL 网格布局没有响应

转载 作者:行者123 更新时间:2023-12-01 13:58:07 25 4
gpt4 key购买 nike

我在让我的代码:( http://codepen.io/hoschiCZ/pen/rOJmmr) 工作时遇到问题。

<html>

<head>
<meta charset="utf-8">
<title>The title doesn't matter</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>

</head>

<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><center>MDL test</center></span>
</div>
</header>
<div class="mdl-grid" style="margin: 0px">
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
<div class="mdl-cell mdl-cell--4-col-phone mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
There is the main text/content located. This has to stay visible at all costs and screen sizes.
<br><small>Material Design Lite courtesy of Google, Inc.</small>
</div>
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
</div>
</div>
</body>

</html>

预期的列布局和计数如下:

Desktop 3-6-3
Tablet 1-6-1
Phone 0-4-0

外面的数字/列可能是广告空间或只是空白空间,否则看起来很糟糕。

问题是:它没有响应,即使在刷新页面后也是如此。我尝试了 Chromium Linux 移动/平板电脑仿真和 Nexus 5 Firefox & Chrome。到处都使用桌面版。

最佳答案

MDL 要求您将其包含在 header 中。

<meta name="viewport" content="width=device-width, initial-scale=1">

顺便说一句,我没有在入门指南中看到它,也许可以将它添加到那里?

工作 CodePen

关于layout - MDL 网格布局没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33289157/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com