Jasny-Bootstrap显示菜单中断了导航栏折叠和导航栏切换功能

Jasny-Bootstrap reveal menu breaks navbar-collapse and navbar-toggle functionality

本文关键字：导航 功能 折叠 显示 中断 Jasny-Bootstrap 菜单      更新时间：2023-09-26

当我从 jasny-bootstrap 中使用此示例并将项目添加到导航栏时，同时将navbar-toggle和navbar-collapse与两个使用 navbar-left 和 navbar-right 的navbar-nav列表一起使用时，它会完全破坏desktop视图中的navbar。

navbar-toggle显示在navbar左侧desktop分辨率处，并且navbar-nav项目被随意呈现给navbar的left和right。

但是，所有这些都适用于mobile和tablet分辨率，尽管navbar-toggle仍位于导航菜单旁边的navbar左侧。

我知道这是因为jasny-bootstrap使用navbar-toggle.那么，我需要从bootstrap css(当然使用不同的类名(和js复制/使用什么css才能将navbar-toggle功能恢复到navbar？

这是我现有代码的摆弄

附加 CSS 显示所有视口的.navbar-toggle。只需将其修改为仅显示用于显示导航菜单的按钮。

.HTML

<button type="button" class="navbar-toggle navbar-toggle-reveal" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">

.CSS

@media (min-width: 0) {
  .navbar-toggle-reveal {
    display: block; /* force showing the toggle */
  }
}

看小提琴

相关文章：