Я не могу изменить размер шрифта или семейство в моей панели навигации bootstrap 4

Привет, я пробовал несколько разных решений с этого сайта и других, но я не могу понять, что не так с моим кодом. Я очень новичок в кодировании, поэтому извините, если это очевидно.

Я не могу изменить семейство шрифтов, размер и т. д. навигационных ссылок из 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
person The Synergist    schedule 23.04.2020    source источник
comment
Как предполагает @CanUver, это может быть проблема с приоритетом. Также селекторы по типу элемента уступают селекторам по классу, которые, в свою очередь, уступают селекторам по идентификатору. Ключевое слово !important должно переопределять все, но, на мой взгляд, не рекомендуется использовать его, когда вам это не нужно - это может ограничить ваши возможности в будущем. Возможно, вам понадобится медиа-запрос для изменения размера шрифта, и тогда вы будете вынуждены повторно использовать ключевое слово. Было бы полезно увидеть CSS, который вы используете, чтобы попытаться изменить шрифт. Надеюсь, это поможет, Фил   -  person blake    schedule 24.04.2020

Ответы (3)


arrow_upward
1
arrow_downward

Спасибо за вашу помощь, ребята. Когда asdf предложил мне зайти в инструменты разработчика, я нашел правильный синтаксис и идентификаторы, чтобы получить желаемый вид, увидев полностью готовый цвет идентификации ссылки, которую я хотел изменить. До этого я использовал все виды сумасшедших комбинаций.

Код, который мне был нужен, был

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

Еще раз спасибо за вашу помощь, ребята, очень признателен.

p.s. кто-то спросил, какой фреймворк я использую, и это bootstrap 4.

person The Synergist    schedule 24.04.2020

arrow_upward
1
arrow_downward

Как вы загружаете bootstrap css? И какой (если есть) фреймворк вы используете?

Если вы хотите переопределить стиль навигационной панели Bootstrap, вы можете создать свой собственный файл css и внести в него свои изменения.

Вот очень простой пример (я использую фреймворк Django, поэтому вы увидите {% %}):

индекс.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>

стиль.css:

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

Вот как выглядит панель навигации до переопределения класса navbar-brand:

до

и после создания моего собственного файла style.css и переопределения Bootstrap:

после

Если вы хотите создать свой собственный класс, вы можете создать совершенно новый в своем файле style.css:

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

И обязательно отредактируйте строку в вашем html:

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

blue_navbar

Если вы когда-нибудь не уверены, почему что-то выглядит не так, как вы ожидаете, вы можете использовать опцию «инструменты разработчика»> «проверить» в своем браузере. Если вы используете Firefox, сочетание клавиш Ctrl+Shift+C; если вы используете хром, сочетание клавиш Ctrl+Shift+I. Вы сможете увидеть, какой CSS загружается, а какой переопределяется. Если ваш CSS по какой-то причине не загружается, вы увидите это на вкладке «Сеть».

person asdf    schedule 24.04.2020
comment
Спасибо за это, инструменты разработчика действительно помогли определить, что я использовал неправильные идентификаторы для нацеливания на него с помощью моего CSS, я проверял раньше, но каким-то образом вы отправили меня туда. Идентификатор, который мне нужно было использовать, был .navbar-dark .navbar-nav .nav-link { font-family: Six Caps; размер шрифта: xx-крупный; } - person The Synergist; 24.04.2020

arrow_upward
0
arrow_downward

Вы пробовали использовать !important ?

потому что, когда вы классифицируете с помощью бутстрапа, он действует как встроенный css. Вы знаете, верно?

font-family : 'example family' !important;
person CanUver    schedule 23.04.2020