bootstrap 4导航栏下拉菜单在IOS设备/ safari上不起作用

Question

几天前我刚刚上传了一个新的引导站点。从那时起，我报告说，导航栏不能在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=# (在我的代码中是like...literally a#，而不是实际的地址)。举个例子：

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

这是我追踪到的最隐蔽的bug之一！我在堆栈溢出中找到了答案：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 (而不是在w3schools.com上的示例中所做的hidden，顺便说一句，这也适用于w3schools.com，因为它不使用任何滚动依赖行为)。这在某种程度上起到了作用，而且在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) */
}