Question

我在bootstrap 4导航中遇到问题，我想设置左侧的徽标/品牌和中心导航按钮以及右侧的登录名/我的帐户按钮，但是我尝试解决此问题，但是当我在移动设备上单击导航按钮时，它突然消失了在右边，请查看代码播放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>

Answer 1

container内的navbar是具有flex的{{1}}，因此最初隐藏的justify-content: space-between会显示在切换上，并被推到下方。

解决方案：将navbar-collpase定位在导航栏的绝对位置将解决此问题。

示例：

navbar-collpase

Answer 2

您只需要在order-md-0 order-last上使用navbarcollapse，以便将其定位在移动屏幕宽度的 last 位置（当Navbar折叠时）...

 <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

如何修复中央的引导程序导航切换按钮

2 个答案: