Bootstrap значок выпадающего на глюк навигационной панели при навигации по страницам - PullRequest
Новая
       32

Bootstrap значок выпадающего на глюк навигационной панели при навигации по страницам

0 голосов
/ 31 января 2020

У меня был этот код выпадающего меню: 

<li class="nav-item dropdown">
    <a href="javascript:void(0)" id="btn_login" class="nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="en">Log In <i class="fas fa-chevron-down"></i></span>
        <span class="my">Log Masuk <i class="fas fa-chevron-down"></i></span>
    </a>
    <ul id="login_dropdown" class="dropdown-menu dropdown-primary dropdown-menu-right mt-2 shadow-lg animated bounceIn" aria-labelledby="btn_login">
        <li class="px-3 pt-3" style="width: 200px;">
            <!-- Form here -->
        </li>
    </ul>
</li>

И я использовал это jquery, чтобы изменить значок выпадающего списка: 

$(".dropdown").on("show.bs.dropdown", function() {
    $(this).find(".fas").removeClass("fa-chevron-down").addClass("fa-chevron-up");
}).on("hide.bs.dropdown", function() {
    $(this).find(".fas").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});

Посмотрите на этот снимок экрана, который я сделал ( Проигнорируйте переключатель, я исправлю это позже, теперь сосредоточьтесь на значке шеврона): Сверкающий Navbar

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

Примечания стороны:

  • Кажется, значок загружается на каждой странице.
  • В настоящее время я использую только HTML. Таким образом, я вставляю одну и ту же панель навигации на каждую страницу, но с другим активным состоянием ссылки.
  • Я не рассматриваю какой-либо iframe или не включаю один и тот же экземпляр панели навигации на все страницы (пока).
  • Это происходит в браузере на основе на основе хрома , каждый раз.
  • только FIREFOX выглядит нормально, хотя кажется, что сначала загружается , но потом нет проблемы.

1 Ответ

0 голосов
/ 31 января 2020

Добавление фиксированной ширины к значку должно заставить навигационную панель перестать прыгать 

.fas {
    width: 20px
}
...