@Zukrine

Как bootstrap 5 работает с кастомными стилями ccs?

Приветствую всех! Разбираюсь потихоньку с веб разработкой, пишу сайт на php с помощью laravel, дошло дело до оформления дизайна и завяз. Решил воспользоваться bootstrap 5, но не понимаю, почему он так неохотно работает с моим файлом css. Допустим, есть навбар, основу кода взял с сайта самого бутстрапа, в css хочу сделать так, чтобы менюшки навбара были рассредоточены по длинне всего экрана, но что бы я не прописывал в css - ничего не меняется. Css подключен правильно. Посмотрите html, пожалуйста, возможно, что-то блокирует изменения, а я пока не понимаю что именно, уже несколько дней пытаюсь самостоятельно разобраться...

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
    <div class="container" id="container_navbar">
        <a class="navbar-brand" href="#"><img class="nav-img" src="/img/logo.png" width="70" height="70" alt=""
                class="d-inline-block align-text-top" />Cat chat</a>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Письма</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Задачи</a>
                </li>
                <div class="dropdown text-end" id="navDropdown">
                    <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
                    </a>
                    <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
                        <li><a class="dropdown-item" href="#">Уведомления</a></li>
                        <li><a class="dropdown-item" href="#">Настройки</a></li>
                        <li><a class="dropdown-item" href="#">Профиль</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#footer">Выйти</a></li>
                    </ul>
                </div>
            </ul>
        </div>
    </div>
</nav>
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Некоторые селекторы в bootstrap написаны через птичку типа .parent>.child и ваш .child не перебьет его вес. Некоторые модификаторы вообще действуют с !important, в инструментах разработчика всё это видно
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
смотри через инспектор че происходит с твоими стилями. может ты их подключил ДО бутстрапа, а надо ПОСЛЕ. может еще что-то перебивает
Ответ написан
Ваш ответ на вопрос

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

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