Html 引导导航栏可以'；无法在iOS系统上正确显示_Html_Css_Ios_Bootstrap 4_Navbar

Html 引导导航栏可以'；无法在iOS系统上正确显示

html css ios bootstrap-4

Html 引导导航栏可以'；无法在iOS系统上正确显示,html,css,ios,bootstrap-4,navbar,Html,Css,Ios,Bootstrap 4,Navbar,我使用bootstrap来构建我网站的导航栏。我在电脑和手机上打开网站试试看。它在三星手机和电脑上都能很好地工作。但当我在iPhone8和6上打开它时。导航栏好像被什么东西覆盖着。而且它不能很好地表现出来我认为z索引或溢出可能有问题。我尝试转换z索引，让溢出自动或可见。但它们都不能工作这是我的样板文件 <!DOCTYPE html> <html> <head> <title>YelpCamp</title> <meta ch

我使用bootstrap来构建我网站的导航栏。我在电脑和手机上打开网站试试看。它在三星手机和电脑上都能很好地工作。但当我在iPhone8和6上打开它时。导航栏好像被什么东西覆盖着。而且它不能很好地表现出来

我认为z索引或溢出可能有问题。我尝试转换z索引，让溢出自动或可见。但它们都不能工作

这是我的样板文件

<!DOCTYPE html>
<html>
<head>
<title>YelpCamp</title>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale=1.0 maximum-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" 
integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="/stylesheets/app.css">
</head>
<body class="d-flex flex-column vh-100">
<%- include('../partials/navbar')%>
<main class="container mt-5">
    <%- include('../partials/flash.ejs') %>
    <%- body %>
</main>
<%- include('../partials/footer')%>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" 
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
crossorigin="anonymous"></script>

这是我在GitHub上的整个应用程序

我把它部署在Heroku服务器上。这里是链接

谢谢你的帮助和建议

您好，这是我打开网站时iPhone safari的图片。

您好，我在iPad上试用了IOS14上的heroku版本，导航栏似乎可以工作。你能再解释一下什么是不好的意思吗？嗨，Orassayg，谢谢你的测试和反馈。我发布了我在iphone8中看到的图像。我想问题可能来自引导库。我将尝试更改引导的版本。如果它有效，我会发布它！

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js">/script>
<script src="/javascript/validateForm.js"></script>
</body>
</html>

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
    <a class="navbar-brand" href="#">YelpCamp</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-link" href="/">Home</a>
            <a class="nav-link" href="/campgrounds">Campgrounds</a>
            <a class="nav-link" href="/campgrounds/new">New Campground</a>
        </div>
        <div class="navbar-nav ml-auto">
            <% if(!currentUser) {%>
            <a class="nav-link" href="/login">Login</a>
            <a class="nav-link" href="/register">Register</a>
            <% } else {%>
            <a class="nav-link" href="/logout">Logout</a>
            <% } %>
        </div>
    </div>
</div>

nav{
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
overflow: visible;
}
.container-fluid{
transform:translateZ(1px);
overflow: visible;
}