Bootstrap 4 navbar-toggler与单独的导航栏链接

Question

我一直在做一个固定的导航栏，需要在所有设备上都可见的导航栏切换器（为了实现这一点，我删除了navbar-toggleable-md类）。它需要位于左侧，在其之前有navbar-brand，而另一组链接（位于触发器之外）需要位于右侧。

像这样：

的是，无论我做什么，那些正确的链接拒绝的事情来保持内联和我的导航栏进入两行。

下面是我一直在使用的代码的基本大纲。我究竟做错了什么？

<nav class="navbar navbar-inverse fixed-top bg-inverse"> 
     <button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
     <div class="collapse navbar-collapse" id="navbarCollapse"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
      </li> 
     </ul> 
     </div> 
    <div class="float-right"> 
    <a>Link</a> 
    </div> 
</nav> 

有人请帮忙！谢谢！

Answer 1

将导航栏更改为flex-row。默认情况下，它是方向：列将使导航栏元素垂直堆叠在2行，就像你看到的。

而且，把品牌后多余的链接（S），并用ml-auto将其推到右边...

<nav class="navbar navbar-inverse fixed-top bg-inverse flex-row flex-wrap"> 
    <button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    <ul class="navbar-nav ml-auto"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
    </ul> 
    <div class="collapse navbar-collapse w-100" id="navbarCollapse"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

http://www.codeply.com/go/CUCeeElIcI