html - 如何创建从右到左的侧边栏

Question

我正在做一个项目，我必须创建两个侧边栏（从左到右用于桌面（推送侧边栏）-桌面和从右到左用于移动（覆盖侧边栏）。桌面推送侧边栏工作正常，我面临问题在移动覆盖边栏中。你能帮帮我吗

关联 ; http://sidenav-both.surge.sh/

桌面版（图片）工作正常

移动版（图片）现在即使我点击切换按钮，侧面导航来自左侧

需要这样的东西

html

  <!--   main content goes from here  -->
        <div class="wrapper d-flex align-items-stretch">


       <!--  Side Navigation  -->
            <nav id="sidebar">
                <div class="custom-menu">
                    <button type="button" id="sidebarCollapse" class="btn btn-primary">
            </button>
        </div>


        <ul class="list-unstyled components mb-5">
          <li class="active"><a href="index.html"> Dashboard</a></li>
          <li><a href="#">Nav 1</a></li>
          <li><a href="#">Nav 2</a></li>
          <li><a href="#">Nav 3</a></li>
          <li><a href="#">Nav 4</a></li>
          <li><a href="#">Nav 5</a></li>
          <li><a href="#">Nav 6</a></li>
          <li><a href="#">Nav 7</a></li>
        </ul>

        </nav> <!-- nav close  -->


        <!-- Page Content  -->

      <div id="content" class="p-4 p-md-5 pt-5">
    
        </div> <!-- row close  -->
     
      </div>

css

@media (max-width: 991.98px) {
  #sidebar {
      /*margin-left: -300px; */
      margin-right: -300px;

    }

  #sidebar.active {
    /*margin-left: 0;*/
    margin-right: 0px;
  }
  
  #sidebar .custom-menu {
    margin-right: -60px !important;
    top: 10px !important; 
  }

  #content{
    margin-left: 35px;
  } 

}

Answer 1

您可以在991.98px 的断点处设置min-widthof 。#sidebarfit-content;

此外，如果您希望侧边栏更薄，请调整ul.

例如

@media (max-width: 991.98px)
#sidebar {
    /* margin-left: -300px; */
    margin-right: -300px;
    min-width: fit-content;
}

#sidebar ul.components {
    padding: 27px 10px;
}