如何在Bootstrap中创建左移动菜单？

Question

我有一个网页，其中包含使用bootstrap框架制作的菜单。当您单击右上角显示的切换按钮时，此菜单以其移动版本出现。此菜单从上向下滑动，看起来像这样：

此标题菜单的代码如下：

     <!--========== HEADER ==========-->
          <header class="header navbar-fixed-top">
              <!-- Navbar -->
              <nav class="navbar">
                  <div class="container" id="main_header_container">
                      <!-- Brand and toggle get grouped for better mobile display -->
                      <div class="menu-container">
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                              <span class="sr-only">Toggle navigation</span>
                              <span class="toggle-icon"></span>
                          </button>

                          <!-- Logo -->
                          <div class="logo">
                              <a class="logo-wrap" href="https://pixels.com/index">
                                  <img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
                                  <img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
                              </a>
                          </div>
                          <!-- End Logo -->

                      </div>

                      <!-- Collect the nav links, forms, and other content for toggling -->
                      <div class="collapse navbar-collapse nav-collapse">
                          <div class="menu-container">

                              <ul class="navbar-nav navbar-nav-right">
                                  <li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>

                                  <li class="nav-item dropdown">

                                   <a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>

                                  <ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">

                                    <li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>

                                    <li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
                                    <li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>

                                    </ul>

                                    </li>

                                    <div id="myDropdown" class="dropdown-content">

                                    <li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
                                    <li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
                                    <li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>

                                    </div>

                                   <li class="nav-item dropdown">
                                   <a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
                                   <a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a> 

                                  <ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
                                  <li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>

                                    </ul>

                                    </li>

                                    <div id="myDropdown1" class="dropdown-content1">

                                    <li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>

                                    </div>

                                  <li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>

                                  <li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>

                              </ul>
                          </div>
                      </div>
                      <!-- End Navbar Collapse -->
                  </div>
              </nav>
              <!-- Navbar -->
          </header>
          <!--========== END HEADER ==========-->

我想做的是标题菜单从左向右滑动，就像这样：

如何使用CSS做到这一点？

Answer 1

将此类：navbar-nav-right更改为navbar-nav-left

   <ul class="navbar-nav navbar-nav-left">
   <li class="nav-item"><a class="nav-item-child nav-item- 
    hover" href="https://pixels.com/index">HOME</a></li>