css - 如何修复中心的引导导航切换按钮
问题描述
我在 bootstrap 4 导航中遇到问题,我想设置左侧徽标/品牌和中心导航按钮和右侧登录/我的帐户按钮,我试图解决这个问题,但是当我单击移动设备上的导航按钮时,它突然向右移动, 请看codeplay http://codeply.com/go/8FOVzFRkfM
<nav class="navbar navbar-expand-md navbar-light" >
<div class="container"> <a class="navbar-brand text-primary" href="#">
<i class="fa d-inline fa-lg fa-stop-circle"></i>
<b> BRAND</b>
</a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar4">
<ul class="navbar-nav ml-auto">
<li class="nav-item bg-white border-success"> <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>
<li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
</ul>
</div>
<span> <a class="btn navbar-btn ml-md-2 btn-light bg-info">My Account</a></span>
</div>
</nav>
解决方案
container
里面navbar
是flex
有justify-content: space-between
,因此最初navbar-collpase
隐藏的显示在切换被推到下面。
解决方案:使navbar-collpase
定位绝对导航栏将解决问题。
例子:
@media only screen and (max-width: 600px) {
.navbar-collapse{
position: absolute;
width: 100%;
top: 56px; /*height of navbar in mobile*/
}
}
推荐阅读
- c - C中的空指针分配错误,代码中的分段错误错误
- c# - 任务
不包含“行”的定义 - angular - Angular ng-block-ui 在 Angular 7 中不起作用?
- java - Jackson - 仅序列化 Java Pojo 的列表属性中的对象 ID
- javascript - JS 该功能在本地主机上运行良好,但在实时服务器中却不行
- javascript - WebRTC 的自适应速率控制:分辨率也会改变吗?
- php - MySQL插入不起作用,phpMyAdmin的语法似乎没问题
- c# - GridView 的 PageIndexChanging 事件未触发
- javascript - 如何更改 Puppeteer 日期格式?
- php - 在 MacOS Mojave 10.14.3 上安装 pear