不要在带有引导程序 v4.5.3 的 safari 浏览器上显示导航栏元素

Question

我正在使用 boostrap v4.5.3 导航栏，但没有在 safari 浏览器上显示导航栏元素。它只显示彩色线条，没有文字和汉堡图标。有人可以帮我吗？

导航栏代码：

<nav class="navbar navbar-expand-lg navbar-dark deep-orange darken-4">
    <div class="container">
        <div class="row">
          <a class="navbar-brand" href="<?php echo'index.php?lang='.$_GET['lang'].'&page=home'; ?>"><?php echo $lang['pagename'] ?></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavBar" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item <?php if(($_GET["page"] == 'home') || ($_GET["page"] == '')) { echo "active";} ?>">
                <a class="nav-link" href="index.php?lang=<?php echo $_GET['lang']; ?>&page=home"><?php echo $lang['homepage'] ?></a>
              </li>
            ....
            </ul>
          </div>
      </div>
  </div>
</nav>

Answer 1

不确定您想要的 .deep-orange 和 .darken-4 颜色，因为您尚未将 css 发布到您的问题中

值得注意的是，您不需要在 .navbar > .container div 中使用 .row。只需使用 .container 即可将 .navbar 内容宽度断点匹配到您的其他 .container 元素。 （直到导航栏更改为移动导航，然后容器变得流畅，使用户能够轻松地通过右上角的拇指到达汉堡菜单。）

添加.row 会将直接子元素视为列，并在您的.navbar 中搞砸。

下面是在 safari 中运行的工作演示。

小提琴也...https://jsfiddle.net/joshmoto/dr230sox/

<!-- navbar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

  <!-- container so navbar contents are not fluid -->
  <div class="container">

    <!-- brand link -->
    <a class="navbar-brand" href="#">Brand</a>

    <!-- hamburger button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavBar" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- navigation menu -->
    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>

  </div>

</nav>

<div class="container py-4">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tincidunt nibh. Donec nec consequat tortor. Sed nibh eros, cursus hendrerit consectetur non, pretium vitae lacus. Nam at libero eu velit tempus molestie. Fusce lobortis commodo
    lectus, eu luctus eros mattis in. Curabitur felis ex, dignissim sed maximus ac, sodales in neque. Nunc eleifend leo nisl, id posuere tortor fermentum ac. Phasellus eros nibh, interdum quis tellus ac, maximus vehicula ipsum. Nam at volutpat massa.</p>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

---

这是上面代码的临时演示，用于在您的设备上进行测试...

https://dev.joshmoto.wtf/scratches/hamburger-bs4.html

这是 iPhone 5 上的移动 safari 上的样子...