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

Question

当我使用this example from jasny-bootstrap 并将项目添加到导航栏，同时使用navbar-toggle 和navbar-collapse 以及两个使用navbar-left 和navbar-right 的navbar-nav 列表时，它会完全破坏navbar 在@987654329 中@视图。

navbar-toggle 以desktop 分辨率出现在navbar 和navbar-nav 左侧的项目被随意呈现给left 和right 的navbar。

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

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

This is a fiddle with my existing code

Answer 1

附加的 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 */
  }
}

See the fiddle