Bootstrap导航栏navbar-toggler按钮位置显示异常如何解决？

使用Bootstrap框架开发前端导航栏时，navbar-toggler折叠切换按钮显示行为异常。

预期效果：折叠按钮显示在导航栏右侧，导航菜单链接排布在左侧。

代码存在类名拼写错误：折叠内容容器的class被误写为navbar-colllapse（collapse字段多写了一个字母l），导致Bootstrap内置的导航栏弹性布局规则无法生效，折叠按钮的定位逻辑完全失效，出现位置错乱。

将折叠容器错误的类名修正为Bootstrap官方定义的navbar-collapse即可，修正后导航栏会自动遵循默认布局规则：品牌标识居左，折叠切换按钮自动对齐到导航栏右侧，展开状态下导航链接默认排布在品牌右侧的左侧区域，完全匹配预期效果。

修正后的完整代码如下：

<nav id="mainNavbar" class="navbar navbar-dark bg-dark navbar-expand-md">
  <a href="#" class="navbar-brand">CANDY</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navLinks">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="" class="nav-link">HOME</a>
      </li>
      <li class="nav-item">
        <a href="" class="nav-link">ABOUT</a>
      </li>
      <li class="nav-item">
        <a href="" class="nav-link">TICKETS</a>
      </li>
    </ul>
  </div>
</nav>

补充：如果后续需要把导航链接调整到导航栏右侧，只需要给<ul class="navbar-nav">追加ms-auto类即可，当前左侧排布的需求不需要额外添加样式。

内容的提问来源于stack exchange，提问作者Anurag Pradhan