Question

我的页面上有一个导航栏，其中有以下CSS

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

如何更改justify-content : start值的值？当我使用无效的SASS编写更改时。

styles.scss

.navbarChange{
    @extend .navbar;
    justify-content:start;
    display:inline-flex;
}

navbar将m替换为navbar

如何覆盖属性？感谢您的帮助

已更新：我的_variables.scss

.navbar
  { &.navbarChange
  {
    justify-content:start ;
    display:inline-flex;
 }
}

在我的html中

<nav class="navbar navbarChange navbar-dark bg-dark ">
        <a class="navbar navbarChange" href="#">

但是它不起作用。

我更改了styles.scss

@import "../node_modules/bootstrap/scss/bootstrap.scss";

 @import "variables";

Answer 1

您必须使用!important，它会覆盖属性。喜欢：

.navbarChange{
    @extend .navbar;
    justify-content: start!important;
    display: inline-flex;
}

Answer 2

您要使CSS规则比引导程序更具体，而不是使用!important来覆盖属性。与其将属性放在.navbarChange {}中，不如考虑选择器.navbar .navbarChange {}。

了解有关MDN上的CSS Specificity的更多信息

如何更改boostrap n sass中导航栏的属性值

2 个答案: