материализоватьне работает - PullRequest
Новая
       27

материализоватьне работает

0 голосов
/ 21 мая 2018

Работают все ссылки на материализуемые классы, кроме столбцов.Моя веб-страница 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.Может кто-нибудь помочь мне?Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 мая 2018 

<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>
0 голосов
/ 21 мая 2018

Попробуйте изменить ссылки, чтобы материализовать файлы 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>
...