Почему мой файл custom.css не изменяет мой материалizeize.css? - PullRequest
Новая
       5

Почему мой файл custom.css не изменяет мой материалizeize.css?

0 голосов
/ 31 января 2019

Я хотел изменить сеточную систему, добавить некоторые границы для строк, столбцов и т. Д. Я знаю, что я должен создать отдельную папку (в моем случае это custom.css) и написать ее там, но похоже, что мой сайт видитэтот файл, но не видит изменений там.

Я попробовал это в своем файле custom.css 

.row-custom {
   border: 5px solid #42a5f5;
}

и просто добавил пользовательский рядок в класс строк

Как это 

  <div class="row row-custom">
  <div class="col s12 ">This div is 12-columns wide on all screen sizes</div>
  <div class="col s6 ">6-columns (one-half)</div>
  <div class="col s6">6-columns (one-half)</div>
  </div>

ЕслиЯ добавляю .row-custom в мой заголовок в layout.html, он работает правильно.

Вот мой файл custom.css: https://imgur.com/sNy6z9G
и вот мое представление custom.css в источниках извеб-сайт: https://imgur.com/zXKiHxG
(эти CSS я также должен был поместить в заголовок, потому что в противном случае он не работал, я удалил его раньше)

Мой заголовок: https://imgur.com/fAI72el

Кроме того, мой materialize.min.css работает правильно.

Я понятия не имею, почему нет изменений в исходных кодах custom.css, что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Вы пытались добавить !important к строке в вашем файле css, чтобы переопределить значения по умолчанию materializecss.css? 

.row-custom {
  border: 5px solid #42a5f5 !important;
}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </head>
  
  <body>
    <div class="row row-custom">
      <div class="col s12">This div is 12-columns wide on all screen sizes</div>
      <div class="col s6 ">6-columns (one-half)</div>
      <div class="col s6">6-columns (one-half)</div>
    </div>
  </body>
  
</html>
0 голосов
/ 15 февраля 2019

Я сделал тот же код, и он заработал, вопрос в том, импортировали ли вы свой custom.css в файл?

, если нет, попробуйте импортировать его или, возможно, место для импорта,как показано в следующем примере, приведенный выше код должен работать 

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Portfolio Blog</title>
    
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <style>
    .row-custom {
      border: 5px solid #42a5f5;
    } 
  </style>
  
  </head>
  
  <body>
  
  <div class="row row-custom">
  <div class="col s12">This div is 12-columns wide on all screen sizes</div>
  <div class="col s6 ">6-columns (one-half)</div>
  <div class="col s6">6-columns (one-half)</div>
  </div>
  
  </body>
  
</html>
...