Bootstrap 导航栏品牌左边距不重要

Question

我正在尝试覆盖引导类的左边距

navbar-brand

就像这样

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

基本的东西对吧？我记得我的训练中是类列表中最后一个类，它的属性已设置。现在在这种情况下，它不会在我的

main.css

文件中进行覆盖。我尝试过不同的选择器、类列表中的不同位置。我什至尝试了不同的类名。就像在 CSS 中一样，我可能会遗漏一些我现在似乎无法想到的小东西，或者可能是我以前从未遇到过的主要东西。

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

main.html & main.css

Answer 1

问题可能与 CSS 特异性有关。您有一个更具体的选择器来设置该元素的边距。您可以通过设置

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

使用！重要。

.navbar .navbar-brand{
margin-left:10% !important;
}

Answer 7

要正确使用 Bootstrap 5 并避免添加 CSS 类，您可以使用 Sass 变量：

$navbar-brand-margin-end: 0 !default;
$navbar-brand-padding-y: 0 !default;
@import "../node_modules/bootstrap/scss/bootstrap";
@import '../node_modules/@fortawesome/fontawesome-free/css/all.min.css';