我不能改变我的bootstrap 4导航条的字体大小或家族。

问题描述 投票：0回答：1

嗨，我已经尝试了多个不同的解决方案，从这个网站和其他，但我不能找出什么是我的代码的问题。我是一个非常新的编码，所以原谅我，如果它是明显的。

我不能改变我的字体-家庭或大小等导航链接从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>

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

bootstrap-4 navbar font-size font-family
1个回答
1
投票

谢谢大家的帮助。当asdf提示我进入开发者工具时，我发现了正确的语法和标识符，通过看到我想改变的链接的所有现成的识别颜色来获得我想要的外观。在此之前，我使用了各种类型的疯狂组合。

我需要的代码是

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

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

p.s有人问我用的是什么框架，是bootstrap 4。

0
投票

你是如何加载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 类，并制作了自己的style.css文件，覆盖了Bootstrap的

before

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

after

如果你想创建自己的类，你可以在style.css文件中创建一个全新的类。

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

而且一定要编辑html中的这一行。

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

blue_navbar

如果你不确定为什么有些东西看起来不像你期望的那样 你可以使用浏览器中的 "开发者工具"> "检查 "选项。如果你使用的是firefox，快捷键是Ctrl+Shift+C；如果你使用的是chrome，快捷键是Ctrl+Shift+I。你将能够看到哪些CSS正在被加载，哪些正在被覆盖。如果你的CSS由于某种原因没有被加载，你会在 "网络 "选项卡中看到。

0
投票

你是否尝试使用 !important ?

因为当你用bootstrap分类时，它就像一个inline css一样。你知道吗？

font-family : 'example family' !important;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.