我想修改网格系统,为行、列等添加一些边框。我知道,我应该创建单独的文件夹(在我的例子中是 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/