javascript - Jasny-Bootstrap 显示菜单打破了导航栏折叠和导航栏切换功能

Question

当我使用 this example from jasny-bootstrap 时并在使用 navbar-toggle 和 navbar-collapse 以及两个使用 navbar- 的 navbar-nav 列表时将元素添加到导航栏left 和 navbar-right 它在 desktop View 中完全打破了 navbar。

navbar-toggle 以 desktop 分辨率出现在 navbar 和 navbar-nav 项的左侧随机呈现在 navbar 的 left 和 right 上。

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

我知道这是因为 jasny-bootstrap 使用 navbar-toggle。那么，我需要从中复制/使用什么 css bootstrap css(当然有不同的类名)和 js 以恢复 navbar-toggle 功能导航栏?

This is a fiddle with my existing code

Answer 1

额外的 CSS 显示所有视口(viewport)的 .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