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" ...