@Rem36

Почему ее работают стили?

Здрасти, почему не переназначаются стили bootstrapa?

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
    crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>



<nav class="navbar navbar-expand-lg navbar-light bg-light section__header-nav">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">
                        <img src="logo.png" alt="" class="img-logo">
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link section__header-nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                        </ul>

                    </div>
                </div>
            </nav>


.section__header-nav-link{
    color: #fff;
}

.section__header-nav{
    background-color: transparent;
}
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
@EvgeniyOst
В обоих случаях приоритет стилей бутстрапа выше чем у ваших стилей.
В первом случае у класса bg-light на белом цвете стоит !important, значит это так просто не обойти и необходимо указывать !important в своих кастомных стилях навбара, либо убрать класс bg-light с элемента.
Во втором случае высокий приоритет селектора обусловлен указанием 3 классов (.navbar-light .navbar-nav .nav-link), это означает, что в кастомных стилях придется указать такое же количество классов, для повышения приоритета (наприм. .navbar-light .navbar-nav .section__header-nav-link)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
alexander_lamdan
@alexander_lamdan
Тупа программист хехе
Я на вашем месте бы просто начал компилировать свои стили, и там где есть !important убирал бы.

Так многие компании делают, когда нужно создавать свою кастомную версию бутстрапа.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы