Bootstrap导航栏品牌左边距不会超越

Question

我正试图覆盖引导类navbar-brand的左边距，如此

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

基本的东西吧？好吧，我记得我的训练是类列表中的最后一个类，它的属性得到了设置。现在在这种情况下，它不会在我的main.css文件中使用我的覆盖。我尝试过不同的选择器，班级列表中的不同位置。我甚至尝试过不同的班级名字。因为它总是像CSS一样，我偶然会遗漏一些我现在似乎无法想到的小东西，或者它可能是我以前从未遇到过的一些重要的东西。

无论如何，有人能指出我在正确的方向吗？这让我在过去两天疯狂了。我会在下面附上我的文件。

main.html＆amp; 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;
  }
}

Answer 2

尝试这样的事情：

.navar div.container-fluid div.navbar-header a {
      margin-left: 15px;
      background: url("../img/logo.png") no-repeat;
}

如果有帮助，请告诉我

Answer 3

您的覆盖不会被评估，因为bootstrap.css中有一个更具体的css规则。您可以尝试使您的css选择器更具体。

例如：

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

Answer 4

.navbar .navbar-brand {
    margin-left: 15px;
}

不如

具体

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

试

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

Answer 5

要专门覆盖属性副本，应用从开发人员工具中应用的确切类。在您的情况下，这将是.navbar>.container .navbar-brand .navbar>.container-fluid .navbar-brand。所以基本上它将是

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

另一种方法是在您想要覆盖所有内容的属性之后使用!important而不管media queries。除非您确定，否则不建议这样做。

Answer 6

使用！important。

{{1}}