Я не могу изменить размер шрифта или семейство в моем bootstrap 4 navbar - PullRequest
Новая
       65

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

0 голосов
/ 23 апреля 2020

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

Я не могу изменить семейство шрифтов или размер и т. Д. c навигационных ссылок из css.

Вот код.

image

Если Вам нужно что-нибудь еще, пожалуйста, спросите. Спасибо.

Ответы [ 3 ]

1 голос
/ 24 апреля 2020

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

Мне нужен был код 

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

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

ps кто-то спросил, какие рамки я использовал, и это bootstrap 4.

0 голосов
/ 24 апреля 2020

Как вы загружаете 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>
* Стиль 1010 *. css: 
.navbar-brand {
    font-size: 2em;
}

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

before

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

after

Если вы хотите создать свой собственный класс Вы можете сделать совершенно новый в своем стиле. 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 голосов
/ 24 апреля 2020

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

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

font-family : 'example family' !important;
...