實現 <div class=“col s12 m6 l3”> 不工作

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 {...}之類的部分。

但是，當我像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專家。 有人可以幫我嗎？ 謝謝！

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 個解決方案

解決方案1
0 2018-05-21 14:55:52

解決方案2
0 已采納

實現 <div class=“col s12 m6 l3”> 不工作

問題描述

2 個解決方案

解決方案1 0 2018-05-21 14:55:52

解決方案2 0 已采納

解決方案1
0 2018-05-21 14:55:52

解決方案2
0 已采納