html - Bootstrap 4 切换菜单“下拉”(仅在移动视图中)
问题描述
我的网站顶部有一个简单的导航栏,只有两个链接。当视图变为移动设备(平板电脑和/或移动设备)时,这些链接消失并且菜单“汉堡包”图标显示。但是,当我单击它时,什么都没有显示。当我单击菜单图标时,我希望我的两个链接都显示。
/* Registration Navbar */
.registration-navbar {
background-color: #8ABE57;
height: 45px;
}
.registration-navbar ul li a {
color: #ffffff;
font-size: 0.8em;
}
.registration-navbar ul li a:hover {
color: #31353D;
}
.navbar-dark,
.navbar-toggler {
border: none;
color: rgba(255, 255, 255, 0);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark registration-navbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse my-auto" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Mi Cuenta</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Registrarme</a>
</li>
</ul>
</div>
</nav>
解决方案
从 .registration-navbar 中删除 height : 45px ,这将解决问题。
/* Registration Navbar */
.registration-navbar {
background-color: #8ABE57;
}
.registration-navbar ul li a {
color: #ffffff;
font-size: 0.8em;
}
.registration-navbar ul li a:hover {
color: #31353D;
}
.navbar-dark,
.navbar-toggler {
border: none;
color: rgba(255, 255, 255, 0);
}
推荐阅读
- jquery - Select2 Ajax 和更多数据供选项
- c++ - WebAssembly + 并发:尝试从 C/C++ 设置线程本地堆栈
- css - 为什么 Firefox 中的 progressBarrProgress 不像 Chrome 中那样填充 100%?
- javascript - Vue-konva 遇到错误:必须使用 import 来加载 ES 模块
- reactjs - 根据所选选项填充 Antd 输入值
- python - Luigi:任务从未被调用
- jhipster - Jhipster 隐藏不记名令牌
- typescript - 如何通过 NPM 包将全局类型声明更改为已声明的类型?
- wso2 - WSO2 更改回复以发送给调用者
- c++ - 将结构插入地图时出现分段错误