Javascript Bootstrap4折叠菜单推送内容

我看了其他论坛，但我没有解决我的问题。发生的事情是，在引导中的sm断点处，单击汉堡菜单时，会将所有标题内容（按钮+h1）推到中间，这会破坏页面的设计，如何解决此问题

以下是我的html代码：

           <nav class="navbar navbar-expand-md navbar-dark">
              <a class="navbar-brand m-0" href="#">
                <img src="images/Untitled-2.png" style="width:235px">
              </a>

              <button class="navbar-toggler" 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">

             <ul class="navbar-nav mx-auto">
                  <li class="nav-item active">
                    <a class="nav-link" href="#">HOME<span class="sronly">(current)</span></a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#">ABOUT</a>
                  </li>

                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" 
                         id="navbarDropdown" role="button" 
                         datatoggle="dropdown" 
                         aria-haspopup="true" 
                         aria-expanded="false">
                    WORK</a>

                     <div class="dropdown-menu" 
                         arialabelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">GALLERY</a>
                        <a class="dropdown-item" href="#">VIDEO</a>
                     </div> 
                   </li>

                   <li class="nav-item">
                     <a class="nav-link" href="#">CONTACT</a>
                   </li>
           </ul>

请张贴所有导航条形码。另外，
datatoggle
必须是
data toggle
。此答案的解决方案对您有帮助吗？可能重复