css - 单击汉堡包 iPhone 后,Bootstrap 导航栏消失
问题描述
所以我在这个页面上工作,我正在设计移动版本,我遇到了一个问题。当我单击 iPhone 上的汉堡菜单时,导航栏品牌和汉堡菜单所在的导航栏消失了。我不能折叠汉堡包,它只是被隐藏了。下拉列表也不在正确的位置,它溢出到页面顶部。
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark navBar">
<div class="container">
<a class="navbar-brand minecraftFont" href="#" style="font-size: 18px; margin-top: 4px;">
<img src="img/logo.png" class="logoFilter" style="width: 45px;" alt="">
RayCraft
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#raycraft-navbar" aria-controls="raycraft-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mobileNavbar" id="raycraft-navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item font-17">
<a class="nav-link navLink" href="#">Store</a>
</li>
<li class="nav-item font-17">
<a class="nav-link navLink" href="#">Servers</a>
</li>
<li class="nav-item font-17">
<a class="nav-link navLink" href="#">News</a>
</li>
<li class="nav-item font-17">
<a class="nav-link navLink" href="#">Rules</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="d-flex justify-content-sm-end justify-content-center align-items-center darkmodeLi">
<div class="d-flex justify-content-center align-items-center darkmode" style="width: 40px; height: 100%;">
<svg>
<path />
</svg>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">English</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div id="toHun" class="dropdown-item langButtons">Magyar</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
如您所见,如果我单击汉堡按钮,导航栏会显示,但位置非常错误。我尝试向 .mobileNavbar (collapse navbar-collapse) 添加边距,得到以下结果。
正如我们所看到的,现在位置没问题,但是导航栏仍然没有显示,并且在 android 上看起来很糟糕。
在具有开发人员选项的 Chrome 桌面上,选择 iPhone X 分辨率,该站点如下所示:
任何帮助表示赞赏
解决方案
推荐阅读
- php - 如何在 php 中使用动态数组键创建字符串?
- python - 如何从许多选项卡中选择特定选项卡以在 pyqt 上添加信息?
- python - 如何保存属性也是对象并且在多个级别上的python对象?
- java - 将实用程序方法移动到抽象超类中是合法的还是不好的做法?
- android - 未删除或替换 Android 片段
- haskell - 组合/混合 mtl 样式类型类约束时的隐式提升
- sql - 将 GETDATE() 插入日期时间列时出现 Azure 数据仓库错误
- php - 不能两次使用更新准备好的语句
- python - 出现“+”时如何取总和?
- java - 尝试使用 Java SDK 从 S3 存储桶下载文件,isStandardEndpoint 上出现空指针异常