我在 bootstrap 4 导航中遇到问题,我想设置左 Logo /品牌和中心导航按钮和右登录/我的帐户按钮,我试图解决这个问题,但是当我在移动设备上单击导航按钮时它突然消失了右边请看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>
最佳答案
您只需在 order-md-0 order-last
上使用 navbarcollapse
使其在移动屏幕宽度上位于last (当导航栏折叠时)...
<div class="collapse navbar-collapse order-md-0 order-last" 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>
https://www.codeply.com/go/KkYoATqtFy
相关:Bootstrap NavBar with left, center or right aligned items
关于css - 如何修复中心的引导导航切换按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55311917/