[解決済み] Bootstrap 4のnavbar-toggler-iconが表示されない。

質問

訪問してください。 https://jsfiddle.net/8tpm4z00/

<div class="container">

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

  <a href="#" class="navbar-brand">KP</a>

  <div class="collapse navbar-collapse" id="myNavigation">
      <div class="navbar-nav">
        <a class="p-3 nav-item nav-link active " href="#">Home</a>
        <a class="p-3 nav-item nav-link " href="#">About</a>
        <a class="p-3 nav-item nav-link " href="#">Contact Me</a>
      </div><!-- <div class="navbar-nav"> -->
  </div><!-- <div class="collapse navbar-collapse"> -->

</div><!-- <div class="container"> -->

は .navbar-toggler-icon は、モバイル対応のため、メニューが折りたたまれているときはナバートグラーボタンに表示されません。

この問題について検索し、jqueryとbootstrapのリンクも調整しました。jqueryのリンクをbootstrap 4のリンクの上に置くことで、です。しかし、それはうまくいかないようです。外部ライブラリは、私のHTMLでは、jsfiddleと同じ順序でリンクされています。

解決方法は？

更新してください。

navbar-inverse はB4版では使えなくなりましたので navbar-dark の代わりに

使用方法 navbar-inverse bg-inverse の代わりに .navbar-default

<section role="navigation">
  <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"><!-- navbar-inverse -->

    <div class="container">

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

      <a href="#" class="navbar-brand">KP</a>

      <div class="collapse navbar-collapse" id="myNavigation">
          <div class="navbar-nav">
            <a class="p-3 nav-item nav-link active " href="#">Home</a>
            <a class="p-3 nav-item nav-link " href="#">About</a>
            <a class="p-3 nav-item nav-link " href="#">Contact Me</a>
          </div><!-- <div class="navbar-nav"> -->
      </div><!-- <div class="collapse navbar-collapse"> -->

    </div><!-- <div class="container"> -->

  </nav>
</section>

更新されたフィドル