Я настроил свой бутстрап. Все работает, кроме тумблера 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">É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