实现<div class=“s12 m6 l3">不工作
实现<div class=“s12 m6 l3">不工作
提问于 2018-05-21 14:36:56
除了列之外，物化类的所有引用都可以工作。我的HTML网页的结构如下：
<head>
<meta charset="UTF-8">
<!-- Bootstrap reference -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.css' %}" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>我的样式表导入工作，因为我使用它来自定义颜色和页面的其他部分。当我输入页面时，我会看到一个专用于col类的部分，其中有类似于.row .col.s3 {.}的部分。
但是，当我像在物化文档中那样调用列时，浏览器无法识别它们，因此：
<div class="container my-custom-container">
<div class="row flex">
<div class="col s12 m6 l3">
...
</div>
</div>
</div>它没有被识别，所以所有的东西都是100%的容器宽度。我对容器和行的自定义CSS是：
.flex {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 100px) {
.my-custom-container{
width:99%;
}}这会是问题吗？我不知道，因为我不是CSS专家。有人能帮我一下吗？谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-22 06:15:50
<html>
<head>
<title>The Materialize Grids Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<div class = "teal">
<h2>Mobile First Design Demo</h2>
<p>Resize the window to see the effect!</p>
</div>
<hr/>
<div class = "row">
<div class = "col m1 grey center">1</div>
<div class = "col m1 center">2</div>
<div class = "col m1 grey center">3</div>
<div class = "col m1 center">4</div>
<div class = "col m1 grey center">5</div>
<div class = "col m1 center">6</div>
<div class = "col m1 center grey">7</div>
<div class = "col m1 center">8</div>
<div class = "col m1 center grey">9</div>
<div class = "col m1 center">10</div>
<div class = "col m1 center grey">11</div>
<div class = "col m1 center">12</div>
</div>
<div class = "row">
<div class = "col m4 l3 yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
and 3 on a large screen (l3).</p>
</div>
<div class = "col s4 m8 l9 grey">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
(m8), and 9 on a large screen (l9).</p>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2018-05-21 14:55:52
尝试更改指向您的链接，以实现js和cs文件。
.flex {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 100px) {
.my-custom-container{
width:99%;
}}<head>
<meta charset="UTF-8">
<!-- Bootstrap reference -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Import materialize.css-->
<!--<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.css' %}" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</head>
<div class="container my-custom-container">
<div class="row flex">
<div class="col s2" style="background: red; padding: 10px">
column 2
</div>
<div class="col s4" style="background: blue; padding: 10px">
column 4
</div>
<div class="col s6" style="background: green; padding: 10px">
column 6
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50451168
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号