twitter-bootstrap Bootstrap - 无法在移动设备上单击下拉子菜单项,并且第一次单击不会触发导航折叠

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13902734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 15:55:13  来源:igfitidea点击:

Bootstrap - Can't click dropdown child menu items on mobile and first click not triggering nav-collapse

androidiphonedrop-down-menutwitter-bootstrap

提问by Tom Hartman

I've run into two issues with dropdown menu items on mobile devices. Specifically:

我在移动设备上遇到了下拉菜单项的两个问题。具体来说:

  1. My nav-collapse isn't shown on the first click of btn-navbar, but only on an iPhone.
  2. While I can toggle dropdowns, I can't click on any dropdown-menu items on mobile devices.
  1. 我的导航折叠不会在第一次点击 btn-navbar 时显示,而只会在 iPhone 上显示。
  2. 虽然我可以切换下拉菜单,但我无法点击移动设备上的任何下拉菜单项。

My page is valid on W3 Validator and I have added both the .nav-collapse and .collapse classes to my navbar. Plus everything works fine when resizing the browser window on my laptop.

我的页面在 W3 Validator 上有效,并且我已将 .nav-collapse 和 .collapse 类添加到我的导航栏。另外,在我的笔记本电脑上调整浏览器窗口大小时,一切正常。

You can see the live web page here: http://hartmandashboard.com/

您可以在此处查看实时网页:http: //hartmandashboard.com/

Has anyone seen this problem before? Anyone care to offer a potential fix? I'd appreciate any help.

有没有人见过这个问题?有人愿意提供潜在的解决方案吗?我很感激任何帮助。

Thanks

谢谢

回答by sulfureous

Yes, I've seen this before and I saw the issue is on github as well. I don't remember exactly where I found this, but some guy was saying that it was an issue about setting those elements to position: absolute;and that re setting them to static would fix it.

是的,我以前见过这个,我在 github 上也看到了这个问题。我不记得我在哪里找到了这个,但有人说这是一个关于将这些元素position: absolute;设置为静态的问题,将它们重新设置为静态可以解决它。

So why don't you go ahead and try this on your custom CSS:

那么为什么不继续在您的自定义 CSS 上尝试这个:

CSS

CSS

.dropdown-backdrop {
  position: static;
}

Let me know if we're on the same page and this solved your issue.

如果我们在同一页面上,请告诉我这解决了您的问题。

回答by 3Gee

This was initially a bootstrap problem. See the fix here: https://github.com/twbs/bootstrap/issues/9543

这最初是一个引导问题。在此处查看修复:https: //github.com/twbs/bootstrap/issues/9543