Question

我想修改网格系统，在行，列等中添加一些边框。我知道，我应该创建一个单独的文件夹（在我的情况下是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源代码没有变化，我在做什么错？

Answer 1

我编写了相同的代码，并且可以正常工作，问题是，您是否将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>

Answer 2

您是否尝试过将!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>

为什么我的custom.css文件没有修改我的materialize.css？

2 个答案: