html - Bootstrap 导航栏品牌左边距不覆盖

Question

我正在尝试像这样覆盖 Bootstrap 类 navbar-brand 的左边距

.navbar .navbar-brand{
  margin-left: 15px;
  background: url("../img/logo.png") no-repeat;
}

基本的东西对吗？好吧，我记得我的培训是类(class)列表中的最后一个类(class)，它的属性已设置。现在在这种情况下，它不会在我的 main.css 文件中进行覆盖。我尝试了不同的选择器，在类列表中的不同位置。我什至尝试了不同的类名。就像在 CSS 中一样，我可能会遗漏一些我现在似乎无法想到的小东西，或者它可能是我以前从未遇到过的重要东西。

无论如何，有人可以在这里为我指明正确的方向吗？在过去的两天里，这一直让我发疯。我将在下面附上我的文件。

main.html & main.css

Answer 1

问题可能与 CSS specificity 有关.您有一个更具体的选择器来设置该元素的边距。您可以通过设置 margin-left: 15px!important;

来确认这一点

如果 margin-left 在那之后生效，这是一个特异性问题，如果不是你知道它是别的东西。

您可以通过使您的选择器更具体或其他选择器更不具体来解决特异性问题(或者您可以通过 style 属性或使用 !important 将样式内联来欺骗它>).

编辑:正如您从 devtools 屏幕截图中看到的那样，您的类肯定不如 Bootstrap 中的类具体。这应该有效:

@media (min-width:768px){
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 15px;
  }
}