Navbar boostrap 4使用折叠触发栏和导航栏

Question

我正在尝试同时实现boostrap导航栏切换和导航栏 像这个网站有： https://www.tennis.org.il/

这是我写的，当我得到md大小并且出现切换时它起作用，但是导航栏消失了。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
    aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" style="background-color:white;">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="/">
    <img style="vertical-align: 0;margin-left:5px;" src="https://www.tennis.org.il/assets/icon/home-icon.svg">
  </a>
  <div style="justify-content: space-between" class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">

      <a class="nav-item nav-link" href="/centers">מרכזי הטניס</a>
      <a class="nav-item nav-link" href="/tennis">המגרש המקצועי</a>
      <a class="nav-item nav-link" href="/community"> המגרש החברתי</a>
      <a class="nav-item nav-link" href="/club">המועדון</a>
      <a class="nav-item nav-link" href="/update">עדכונים</a>
    </div>

    <div style="padding:10px;">
      <img style="height:1.5rem" src="https://www.tennis.org.il/assets/img/tel-icon.png">

      <a style="color:#405277;padding:1rem;" href="tel:1234">*8721</a>

    </div>
  </div>

</nav>

我试图将nav的类名更改为 navbar navbar-toggleable-lg或sm，但是它消失了导航栏，仅显示切换栏 我想一起展示