物化 <div class="col s12 m6 l3"> 不工作答案

【问题标题】：Materialize <div class="col s12 m6 l3"> not working物化 <div class="col s12 m6 l3"> 不工作
【发布时间】：2018-10-31 05:56:05
【问题描述】：

除了列之外，所有对具体化类的引用都有效。我的 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 专家。有人可以帮帮我吗？谢谢！

【问题讨论】：

标签： html css frontend materialize

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：