时间戳

首页 > 解决方案 > 覆盖 CSS 属性（不是变量）

bulma - 覆盖 CSS 属性（不是变量）

问题描述

我目前正在使用 Bulma CSS，但我仍在努力解决一些问题。我使用https://bulma.io/bulma-start/作为我的设置。

问题：

我正在尝试更改默认类 ( level-item) 的 CSS 属性，但我不确定如何处理。我找到了很多关于如何覆盖变量的信息，这也是文档的“自定义”部分所讨论的内容。

就我而言，我想justify-content: center;从level-item班级中删除，但我该怎么做？将“默认”bulma.css 中的所有内容复制到我的 custom.css 中，将类重命名为level-item-custom然后将其分配给我的元素？这对我来说听起来不正确，我希望得到一些指导。

谢谢！

.level-item {
  align-items: center;
  display: flex;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center; }

目前我的文件如下所示：

主要.scss：

@import "../node_modules/bulma/bulma";
@import "../css/custom.css";

所以我的最终main.css文件@import url(../css/custom.css);在生成后有一个。

标签： bulma

解决方案

我希望你现在已经解决了这个问题，但对于其他有同样问题的人：

你可以尝试添加

.level-item{
    justify-content: flex-start !important;
}

main.scss在编译之前进入你的文件。这将被添加到最终的 css 文件中，并将覆盖 bulma 值。

（W3Schools说这flex-start是默认值justify-content）

推荐阅读