使用 React Bootstrap，为什么我不能在我的 scss 中更改 'margin-left' 的值，即使在使用 '!important' 时也是如此

Question

所以，以前我在导航栏上使用了“ml-auto”类，让我的下拉菜单一直向左推。但是，我不希望它在进入小屏幕时一直向左推，并且导航栏变为垂直方向。

我尝试为我的 NavDropdown 提供以下类和 id

className={styles.naviDropdown}
id='navigationDropdown'

并对其应用以下样式

.naviDropdown #navigationDropdown {
    margin-left: auto !important;
}

@media (max-width: 768px) {
    .naviDropdown #navigationDropdown {
        margin-left: 0 !important;
    }
}

然而，这不起作用，尽管使用了 !important 标签，我以前认为这是一张通用的王牌，它会覆盖其他所有东西，不管我已经拥有的大量特异性，但是唉，它什么也没做.

所以我想，嗯，也许我必须一直到我的 custom.scss，它是我的引导程序的主题，并且已经覆盖了一些东西。

不幸的是，没有 $dropdown-margin-left 变量我可以轻松更改自己，所以我尝试像这样实现它

.dropdown {
    #navigationDropdown {
        margin-left: auto !important;
    }
}

@media (max-width: 768px) {
    .dropdown {
        #navigationDropdown {
            margin-left: 0 !important;
        }

我一直很喜欢 bootstrap 组件，但是如果他们不让你尽可能难以简单地覆盖他们的 css，就好像他们想强迫你以某种方式做事。

编辑： 所以，我通过检查器发现，由于某种原因，id 被应用于由 React Bootstrap 生成的标签，而不是被赋予适当类的包含 div。任何想法可能会发生什么？

Answer 1

由于您的元素同时具有类和 id，因此您的选择器需要：

.naviDropdown#navigationDropdown

没有空格。