Question

当我使用this example from jasny-bootstrap并在使用navbar-toggle和navbar-collapse时将项目添加到导航栏，其中两个navbar-nav列表使用navbar-left和{{1它会在navbar-right视图中完全打破navbar。

desktop左侧navbar-toggle分辨率显示desktop navbar navbar-nav left right navbar mobile } tablet。

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

我理解这是因为css使用了bootstrap。因此，我需要css从js navbar-toggle复制/使用{一个不同的课程名称（）和navbar，以便将{{1}}功能恢复为{{1}}？

This is a fiddle with my existing code

Answer 1

其他CSS会显示所有视口的.navbar-toggle。只需将其修改为仅显示用于显示navmenu的按钮。

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

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

1 个答案:

HTML

CSS