Navbar Bootsrap 4 не переключается (scss?) - PullRequest
0 голосов
/ 09 июня 2019

Я настроил свой бутстрап. Все работает, кроме тумблера navbar. Вы можете просмотреть мой сайт на http://www.ideastud.io.

Введение

У меня есть 4 SCSS для настройки начальной загрузки:

  • common_begin (для настройки точек останова сетки, переопределения переменных, ...)
  • theme1 (для настройки цветов и добавления стилей theme1)
  • theme2 (для настройки цветов и добавления стилей theme2)
  • common_end (чтобы добавить классы или настроить классы начальной загрузки для обеих тем)

В моем HTML-коде я использую theme1 или theme2 (скомпилировано gulp). Theme1 и theme2 имеют одинаковую иерархию:

// override bootstrap variables

// import common styles 
@import "common_begin.scss";

// import some bootstrap :
@import "../lib/bootstrap/scss/_functions.scss";
@import "../lib/bootstrap/scss/_variables.scss";
@import "../lib/bootstrap/scss/_mixins.scss";

@import "../lib/bootstrap/scss/bootstrap.scss";

// theme styles
@import "theme1.scss";

Я не думаю, что генерация начальной загрузки является причиной проблемы ниже.

Issue

В моем макете у меня есть навигационная панель ... и переключатель не работает ... Я не знаю почему (но это не первый раз, когда я внедряю бутстрап):

<header>
    <a class="d-flex justify-content-center" href="/">
        <img src="/images/logo-ideastudio.png" height="50" class="d-inline-block align-top m-1" alt="">
    </a>
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-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">
                    <li class="nav-item active"><a class="nav-link" asp-page="/">Accueil</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/olymp">Olymp</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/team">Equipe</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/expertises">Expertises</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/trainings">Formations</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/projects">Clients</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/about">À propos</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

Попытки разрешения

Изменить подход списка

И поскольку [bootstrap] использует классы для своих nav s, [мы] можем полностью отказаться от подхода, основанного на списках, если хотите (https://getbootstrap.com/docs/4.3/components/navbar/#nav), Я пытаюсь заменить ul / li на div с, вот так:

<header>
    <a class="d-flex justify-content-center" href="/">
        <img src="/images/logo-ideastudio.png" height="50" class="d-inline-block align-top m-1" alt="">
    </a>
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-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">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="/">Accueil</a>
                    <a class="nav-item nav-link" href="/go/olymp">Olymp</a>
                    <a class="nav-item nav-link" href="/go/team">&Eacute;quipe</a>
                    <a class="nav-item nav-link" href="/go/expertises">Expertises</a>
                    <a class="nav-item nav-link" href="/go/trainings">Formations</a>
                    <a class="nav-item nav-link" href="/go/projects">Clients</a>
                    <a class="nav-item nav-link" href="/go/press">Presse</a>
                    <a class="nav-item nav-link" href="/go/about">About</a>
                </div>
            </div>
        </div>
    </nav>
</header>

Умышленно, у меня нет бренда Navbar.

Проверьте некоторые предметы первой необходимости

У меня такой же идентификатор для атрибута data-target и т. Д. Я хочу вставить исходный пример на страницу about (à offer), если вы хотите попробовать. Я думаю, что я уже проверил все шаги ... У меня есть идея ...

Обновление

Я попытался обновить bootstrap 4.2.1 до 4.3.1

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...