我无法更改 bootstrap 4 导航栏中的字体大小或系列

Question

您好，我尝试了来自该站点和其他站点的多种不同解决方案，但我无法弄清楚我的代码有什么问题。我对编码很陌生，所以如果很明显，请原谅。

我无法更改来自 css 的导航链接的字体系列或大小等。

这是代码。

 </head>
  <body>
    <section class="header">
      <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="#"
            ><img
              src="images/Twisted-white-flat-7-7's.png"
              alt="the-twisted-spirit-7-7s"
              height="100px"
          /></a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo02"
            aria-controls="navbarTogglerDemo02"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li class="nav-item active">
                <a class="nav-link" href="#" ;
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" ;>Link</a>
              </li>
            </ul>
            <!-- <form class="form-inline my-2 my-lg-0">
              <input
                class="form-control mr-sm-2"
                type="search"
                placeholder="Search"
              />
              <button
                class="btn btn-outline-success my-2 my-sm-0"
                type="submit"
              >
                Search
              </button>
            </form> -->
          </div>
        </nav>
      </div>
    </section>
  </body>

如果您还需要什么，请询问。谢谢。

Answer 1

您尝试使用 !important 了吗？

因为当您使用 bootstrap 分类时，它充当内联 css。你知道吗？

font-family : 'example family' !important;

Answer 2

您如何加载 bootstrap css？您使用的是什么（如果有）框架？

如果您想覆盖 Bootstrap 的导航栏样式，您可以创建自己的 css 文件并在其中进行编辑。

这是一个非常简单的示例（我使用的是 Django 框架，所以这就是为什么您会看到 {% %}）：

index.html:

<!DOCTYPE html>
<html>
{% load static %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'example/style.css' %}">
  <head>
<meta charset="utf-8">
  <title>Test page</title>
</head>
<body>

<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
<p>the test page</p>
</body>
</html>

style.css:

.navbar-brand {
    font-size: 2em;
}

这是覆盖 navbar-brand class 之前导航栏的样子：

在制作我自己的 style.css 文件并覆盖 Bootstrap 之后：

如果您想创建自己的 class，您可以在 style.css 文件中创建一个全新的：

.custom-navbar-blue {
    font-size: 2em;
    color: blue;
}

并确保编辑 html 中的行：

  <span class="custom-navbar-blue">Navbar</span>

如果您不确定为什么有些东西看起来不像您期望的那样，您可以在浏览器中使用 "developer tools" > "inspect" 选项。如果你使用的是 firefox，快捷键是 Ctrl+Shift+C；如果您使用 chrome，快捷键是 Ctrl+Shift+I。您将能够看到正在加载的 CSS 以及正在覆盖的内容。如果您的 CSS 由于某种原因没有加载，您会在 "Network" 选项卡中看到它。

Answer 3

感谢大家的帮助。当 asdf 提示我进入开发人员工具时，我找到了正确的语法和标识符，通过查看我想要更改的 link 的所有准备好的识别颜色来获得我想要的外观。在那之前，我使用了所有类型的疯狂组合。

我需要的代码是

.navbar-dark .navbar-nav .nav-link {
  font-family: "Six Caps";
  font-size: xx-large;
}

再次感谢大家的帮助，非常感谢。

p.s有人问我用的是什么框架，是bootstrap4.

我无法更改 bootstrap 4 导航栏中的字体大小或系列

I cant change the font size or family in my bootstrap 4 navbar

bootstrap-4

navbar

font-size

font-family