ブートストラップnavbar-rightが修正されていません

Question

ナビゲーションバーの右側にナビゲーションリンクが揃うようにします。しかし、私のnavリンクは、左側のロゴの横に表示されています。何か案は？ここで

は私のコードです：ここでは

<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light white-bg purple-top-strip"> 
    <div class="container"> 
     <a class="navbar-brand" href="#"><img src="images/presitskillsbank-logo.png" width="102" height="40" alt=""/></a> 
     <button class="navbar-toggler" 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> 
     <div class="collapse navbar-collapse navbar-right" id="navbarCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <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 disabled" href="#">Disabled</a> 
      </li> 
     </ul> 

     </div> 
    </div> 
    </nav> 

Answer 1

あなたはいくつかのミスにHTMLあなたが構造化された方法を作った、これはブートストラップ3で動作しますが、ブートストラップ4で、それはしません。ここで

は、ブートストラップ4に働くだろうコードの例です。ここで

<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center"> 
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="navbar-collapse collapse" id="collapsingNavbar3"> 
     <ul class="nav navbar-nav ml-auto w-100 justify-content-end"> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Right</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Right</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Right</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

は、それはおそらく、いくつかのCSSの間違いを作っている私のために正常に動作例http://jsbin.com/pagigugelo/edit?output

Answer 2

は、あなたのクイックリファレンスのための作業コードです。

更新フィドル：https://jsfiddle.net/DTcHh/39316/

.navbar-toggler { 
 
    float: right; 
 
    margin-top: 10px;; 
 
    position: relative; 
 
    z-index: 3; 
 
} 
 
.navbar-right { 
 
    float: right; 
 
} 
 
.navbar-nav { 
 
    margin-top: 20px; 
 
} 
 
.navbar-nav li { 
 
    width: 100%; 
 
}