不工作,html,css,frontend,materialize"/>
时间戳

首页 > 解决方案 > 物化

不工作

html - 物化
不工作

问题描述

除列外，所有对具体化类的引用都有效。我的 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 {...} 之类的部分。

但是，当我在 Materialize 文档中调用它们时，浏览器无法识别这些列，例如：

<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 专家。有人可以帮帮我吗？谢谢！

标签： htmlcssfrontendmaterialize

解决方案

尝试更改链接以实现 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>

推荐阅读