如何创建从右到左的侧边栏答案

【问题标题】：how to create right to left sidebar如何创建从右到左的侧边栏
【发布时间】：2021-07-10 04:26:06
【问题描述】：

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

桌面版（图片）工作正常

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

需要这样的东西

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;
  } 

}

【问题讨论】：

标签： html css bootstrap-4 responsive-design sidenav

【解决方案1】：

可以在991.98px的断点处设置#sidebar的min-width为fit-content;。

另外，如果您希望侧边栏更薄，请调整 ul 的填充。

例如

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

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

【讨论】：