Bootstrap 折叠菜单链接在移动设备上不起作用

Question

我在导航栏中使用带有子菜单项的可折叠菜单。 菜单在窄显示器上正确折叠，子菜单项正确显示。

但是，当我在移动设备上单击子菜单项时，链接不起作用。 相反，子菜单折叠，折叠菜单上的顶部菜单项被突出显示，就好像子菜单从未打开过，“点击”通过它到达下面的元素。

当我在桌面浏览器上测试页面时，一切正常。

我已经定制了一些引导程序样式，但主要用于颜色等。

有什么想法吗？ TIA。

Answer 1

看起来这是 Bootstrap 的一个已知问题（ https://github.com/twitter/bootstrap/issues/4550也可能是https://github.com/twitter/bootstrap/issues/7968 ），这非常令人失望，因为它是开放了很长时间，从未修复，使用 Bootsrtap 的主要原因是它对响应式设计的承诺。

在https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8 上提出的修复程序似乎有效，但它使用的是 Bootstrap 源代码，因此如果您使用的是缩小版本并且不使用源脚本，它看起来会有所不同.

在我的缩小版本中，我通过在 touchstart 测试中添加子字符串“disable-”来修复它，因此禁用了此功能。

要在缩小的 bootstrap.min.js 文件中执行此操作，请找到子字符串

"ontouchstart"

并将其替换为

"disable-ontouchstart"

感谢@Shmalzy 试图提供帮助。

Answer 2

我在 iPad 上遇到了这个问题。 我发现我在锚标签上遗漏了以下内容：

 href="#collapseSection"

其中 #collapseSection 是折叠面板的 ID。 例子：

<div class="panel panel-default">
  <div class="panel-heading"><a class="accordion-toggle" href="#collapseHelp" data-toggle="collapse" data-target="#collapseHelp" data-parent="#accordion">Printing Problems?</a></div>
  <div id="collapseHelp" class="panel-collapse collapse">
    <div class="panel-body">Before you contact the helpdesk, have a look at <a href="Help.asp?PrintHelp">our help system</a>.</div>
  </div>
</div>

你不应该需要改变的精缩JavaScript来解决这个问题，因为它工作在引导例子罚款。 这完全是正确格式化 HTML 的问题。

Answer 3

当菜单项列表太长时，您可能需要在 CSS 中添加以下代码才能在移动浏览器上看到完整的菜单（在 iOS 上测试）：

@media (max-width: 1023px) {
.nav-collapse {
    overflow-y: auto;
}
}

Answer 4

我遇到了同样的问题，此修复程序对我有用：

https://github.com/stevecoug/bootstrap/commit/b2a23b222fd05fa824ed05fb096971321ad3dba1

Answer 5

我尝试使用 Bootstrap 的可折叠面板不是作为导航或菜单，而是作为可折叠面板（例如http://www.w3schools.com/bootstrap/bootstrap_collapse.asp ），并遇到了同样的问题..

我意识到将<a...>更改为<button...>至少对我的手机有帮助（实际上该示例也使用了button ）。 然后，您可以将按钮的样式设置为看起来像一个链接，实际上有一个名为btn-link的 Bootstrap CSS 类就是这样做的，或者您可以添加自己的花哨样式。 对于我的用例，这是最简单和最简单的解决方案。

Answer 6

我不得不做一些快速而肮脏的事情，所以我使用了过去“过去”所做的事情。
我给了我的链接： <a style="position:relative;z-index:1000" ...