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

标签 css materialize

我想修改网格系统,为行、列等添加一些边框。我知道,我应该创建单独的文件夹(在我的例子中是 custom.css)并将其写在那里,但看起来我的网站看到这个文件,但没有看到里面的变化。

我在我的 custom.css 中试过了

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

只需将 row-custom 添加到行类

像这样

  <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 View : https://imgur.com/zXKiHxG
(我还必须将这些 css 放入标题中,否则它不起作用,我之前将其删除)

我的标题: https://imgur.com/fAI72el

此外,我的 materialize.min.css 工作正常。

我不知道为什么源 custom.css 没有变化,我做错了什么?

最佳答案

我编写了相同的代码并且有效,问题是,您是否将 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>

关于css - 为什么我的 custom.css 文件没有修改我的 materialize.css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54451927/

相关文章:

java - 将样式设置为 GWT ListBox 元素

css - Bootstrap CSS 问题

css - 尝试让 jQuery Mobile 元素在 TouchStart 上突出显示

html - 实现页脚不会留在底部?

html - Materialisecss卡分布

html - 如何使列从容器顶部开始,而不依赖于其他列?

css - 在蓝图中处理图像大小

jquery - materialize-css 和 Webpack 问题,忽略大小写时具有相同名称的模块,JQuery

javascript - 在实现 css 中获取事件选项卡的 id

javascript - materializeCSS - 带有选项卡的扩展导航栏作为页面链接