bootstrap 4 navbar下拉列表不适用于iOS设备/ Safari

fee*_*eva 3 html safari navbar twitter-bootstrap

几天前,我刚刚上传了一个新的引导站点。从那以后,我一直在报告,导航栏在IOS设备上不起作用。在任何其他设备或浏览器上,仅在Safari上,都不会发生此问题。

单击/触摸汉堡符号时,下拉菜单会正确打开,但是单击子菜单下拉菜单时,整个导航栏会折叠而不显示子菜单。因此,子菜单根本无法访问-基本上使整个站点都无法在IOS上访问。

有人知道解决方案吗?谢谢

这是我的代码:

      <div class="container-fluid pb-2">
            <nav class="navbar navbar-expand-md navbar-dark bg-alert fixed-top">
                      <a class="navbar-brand pr-4" href="../index.html">Naturpark Weissensee</a>
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>


                      <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
                        <ul class="navbar-nav">

                                    <li class="nav-item active dropdown">
                                            <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                              Unterkunft buchen
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdown1">
                                              <a class="dropdown-item" href="Hotels.html">Hotels</a>
                                              <a class="dropdown-item" href="Pensionen.html">Pensionen</a>
                                              <a class="dropdown-item" href="Camping.html">Camping</a>
                                              <a class="dropdown-item" href="Ferienwohnungen.html">Ferienwohnungen</a>
                                              <a class="dropdown-item" href="Weissensee%20Umgebung.html">Weissensee Umgebung</a>
                                            </div>
                                  </li>      

                                    <li class="nav-item dropdown">
                                            <a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                              Sommer
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdown2">
                                              <a class="dropdown-item" href="Wasser.html">... am See</a>
                                              <a class="dropdown-item" href="Dorf.html">... im Dorf</a>
                                                <a class="dropdown-item" href="Wald.html">... im Wald</a>
                                              <a class="dropdown-item" href="Schifffahrt.html">Schiffrundfahrt</a>
                                            </div>
                                  </li>

                                  <li class="nav-item dropdown">
                                            <a class="nav-link dropdown-toggle" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                              Winter
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdown3">
                                              <a class="dropdown-item" href="Schnee.html">... im Schnee</a>
                                              <a class="dropdown-item" href="Eissport.html">... am Eis</a>
                                            </div>
                                  </li>

                                  <li class="nav-item dropdown">
                                            <a class="nav-link dropdown-toggle" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                              Information
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdown4">
                                              <a class="dropdown-item" href="Wissenswertes.html">Wissenswertes</a>
                                              <a class="dropdown-item" href="Anlaufstellen.html">Anlaufstellen</a>
                                            </div>
                                  </li>
                                </ul>
                      </div>
            </nav>  
      </div>            
Run Code Online (Sandbox Code Playgroud)

小智 6

我发现我的问题是纯粹的疯狂。下拉菜单需要href =#(例如...在我的代码中实际上是#,而不是实际地址)。因此,例如:

<a href="#" class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                          Unterkunft buchen
                                        </a>
Run Code Online (Sandbox Code Playgroud)

这是我曾经要追踪的最隐蔽的错误之一!我在堆栈溢出处找到了答案: iPad上的Bootstrap 3 Dropdown不起作用