Html 如何在Bootstrap中为大屏幕制作带有右侧链接的可折叠导航栏？

我在引导中制作了导航栏，链接在屏幕右侧。现在我想通过添加菜单按钮使导航栏响应。我曾经尝试过用breakpoint-md创建一个toggler类，但是这样我的链接就会出现在大屏幕的左侧。此外，按钮不可见。为什么，我做错了什么

我的代码：

<nav class="navbar navbar-expand-md sticky-top fixed-top bg-white navbar-toggelable-md">
        <div class="container">
        <strong><a class="navbar-brand" href="#">Bhawna</a></strong>

        <button class="navbar-toggler navbar-toggler-right" type="button" 
        data-toggle="collapse" data-target="#navbarContent">
        <span class="navbar-toggler-icon"></span>
        </button>

  <div class="collapse navbar-collapse navbar-right" id="navbarContent">


                <ul class=" navbar-nav navbar-right">
            <li class="nav-item active"><a class="nav-link active"  
               href="index.html">Work</a> </li>
            <li></li>
            <li class="nav-item"><a class="nav-link" href="about.html">About 
             Me</a> </li>
   </div>
             <li> <label class="switch">
             <input type="checkbox" checked data-toggle="toggle"  
             onclick="location.href='darkindex.html'">
             <span class="slider round"></span>

              </label>
              </li>
                </ul>

            </div>

            </nav>

---

你在下面的街区外

可折叠导航条 在本例中，导航栏隐藏在小屏幕上，并替换为右上角的按钮，尝试重新调整此窗口的大小

只有单击按钮时，才会显示导航栏

提示：您还可以删除.navbar expand md类以始终隐藏navbar链接并显示切换按钮。

<li> <label class="switch">
  <input type="checkbox" checked data-toggle="toggle" onclick="location.href='darkindex.html'">
  <span class="slider round"></span>

  </label>
</li>