Question

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

但是，当我在Materialise文档中调用它时，浏览器无法识别列，如下所示：

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

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

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

实现<div class =“col s12 m6 l3”>不工作

2 个答案: