Question

我刚刚上传了一个新的bootstrap-site几天前。从那以后我报告说，导航栏不适用于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>

Answer 1

我该死的问题是纯粹的疯狂。下拉菜单需要href =＃（例如...在我的代码中实际上是＃，而不是实际地址）。例如：

<a href="#" class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                          Unterkunft buchen
                                        </a>

这是我曾经必须找到的最隐蔽的错误之一！我在堆栈溢出处找到了答案： Bootstrap 3 Dropdown on iPad not working

Answer 2

使用 position:fixed 时导航栏下拉菜单无法显示的 Safari 问题

我在 Safari（笔记本电脑上）中遇到了类似的问题，当我使用 position: fixed 作为顶部元素（导航栏）时，导航栏下拉菜单不会显示。当我使用 position: sticky 时它会解决，但这会带来其他（样式）问题。

我说的是来自 w3schools.com 的纯 JavaScript 示例，可以在 here 中找到。我修改了这个例子，以便能够获得一个导航栏，该导航栏根据滚动行为显示和隐藏。因此，除其他外，我在 CSS 中添加了一个 position: fixed。

解决方案是将导航栏的 overflow 属性设置为 visible（而不是 hidden，就像在 w3schools 的示例中所做的那样.com，顺便说一下，它也适用于 Safari，因为它不使用任何滚动相关的行为）。这以某种方式成功了，并且仍然适用于 Firefox 和基于 Chromium 的 Brave 浏览器，因此可能也适用于 Chrome。

以下是同样适用于 Safari 的 CSS 代码：

.navbar {
  overflow: visible; /* Solution for the Safari issue with navbar dropdown menu failing to show:
  Simply setting this overflow CSS property of the navbar to visible instead of hidden. */
  background-color: #333;
  position: fixed; /* Safari issue with navbar dropdown menu failing to show up front:
  Issue: Only if position:sticky the dropdown menu works in Safari,
  but then the navbar stops working as desired, with showing/hiding dependent on scrolling. */
  top: 0; /* Was -50px; in the example, but that's irrelevant for the Safari issue. */
  width: 100%;
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

bootstrap 4导航栏下拉菜单不适用于IOS设备/ safari

2 个答案: