ナビゲーションバーの「ハンバーガーアイコン」を起動し、ブートストラップ4

Question

ブラウザサイズに基づいて折り畳まれたナビゲーションバーを作成しました。私は積み重ねからナビゲーションバーを停止するように見えることはできません、そして、アイコンは、ブラウザのサイズが縮小されたときに、ナビゲーションバーのブランドの下に行く。私はそれをブランドの下ではなくナビバーの右側に表示したいと思っています。

<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top navbar-custom" id="mainNav"> 
    <a class="navbar-brand" href="#home"> 
     <img class="logo" src="img/unicornActive.png" onmouseover="hover(this);" onmouseout="unhover(this);" alt="logo"> 
    </a> 

    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 

</button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation"> 
     <ul class="navbar-nav ml-auto"> 
      <li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li> 
      <li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li> 
      <li class="nav-item"><a class="nav-link" href="#work" data-toggle="tab">Work</a></li> 
      <li class="nav-item"><a class="nav-link" href="#technique" data-toggle="tab">Technique</a></li> 
      <li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li> 
     </ul> 
    </div> 
</nav> 

本当にありがとうございます。私はそれを正しく浮かべてみましたが、うまくいかないようです。

Answer 1

どのバージョンのブートストラップとjqueryを使用しますか？ 最新のバージョンのブートストラップフレームワークでjsfiddleでインスタンスを作成しましたが、問題は発生しません。

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css 
https://code.jquery.com/jquery-3.2.1.slim.min.js 
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js 
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js 

JSFiddler