Question

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

Iv注意到关闭显示器：！important;在bootstrap css（浏览器调试器）中的navbar-collapse.collapse似乎可以解决这个问题 - 但是由于各种原因，这是一个糟糕的修复 - 我不知道如何在我的自定义样式表中覆盖它。 Bootstrap Collapse下拉列表中是否有任何类似问题？

我创建了一个Bootply文档，图像和字体很棒的图标不会显示在那里所以它看起来很奇怪，忽略红线，因为那是测试某事物的高度。

http://www.bootply.com/2dWHqPQ0x3

我知道它不是一个编码服务 - 只是寻找指向正确的方向，对未来有类似问题的人会有好处。

Answer 1

这是因为'navbar-collapse'是为了在bootstrap.css中定义的xs屏幕工作（切换）而构建的。

这是从bootstrap网站获取的：更改折叠的移动导航栏断点当视口比@ grid-float-breakpoint更窄时，导航栏会折叠到其垂直移动视图中;当视口的宽度至少为@ grid-float-breakpoint时，导航栏将展开为其水平非移动视图。在Less source中调整此变量以控制导航栏折叠/展开的时间。默认值为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;
  }
}

Bootstrap折叠无法在小视图中工作

1 个答案: