Javascript 引导折叠在小视图中不工作

我似乎对小视图中的引导折叠下拉功能有一个奇怪的问题。我在XS和S视图的标题中都有图标，在XS中，单击这些图标将扩展功能，而在S中，这些下拉列表已经打开，如果我尝试单击与下拉列表交互的按钮，我会得到一个奇怪的动画

我注意到关掉显示器：！重要的；在导航栏上，引导css（浏览器调试器）中的collapse.collapse似乎可以解决这个问题——但是由于各种原因，这是一个糟糕的修复方案——我不知道如何在自定义样式表中覆盖它。有没有人遇到过类似的引导崩溃下拉列表问题

我已经创建了一个Bootply文档，图像和字体图标不会显示在那里，所以看起来有点奇怪，忽略红线，因为它是用来测试东西的高度的

---

我知道这不是一项编码服务——只是寻找正确的方向，对那些未来有类似问题的人来说会很好。

这是因为“导航栏折叠”只适用于bootstrap.css中定义的xs屏幕

这是从引导站点获取的： 更改折叠的移动导航栏断点 当视口的宽度小于@grid float breakpoint时，导航栏将折叠为其垂直移动视图；当视口的宽度至少为@grid float breakpoint时，导航栏将扩展为其水平非移动视图。当导航栏折叠/展开时，在较少的源中调整此变量以进行控制。默认值为768px（最小的“小”或“平板”屏幕）

所以本质上你需要改变它，使它从992px开始，而不是768px

@media (min-width: 768px){ /* change to 992px (or whatever you've set your grid breakpoint at for 'md') */
  .navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
  }
}