slider-wraper

demoadmin/index/index.css

@@ -3,7 +3,7 @@
 #nav-fluid {
   position: sticky;
   top: 0px;
-  z-index: 1
+  z-index: 3;
 }
 #nav-wraper {
   height: 50px;
@@ -17,4 +17,25 @@
   top: 50px;
   overflow-y: auto;
   z-index: 2;
+	visibility: visible;
+	display: block;
+	transform: none;
+	border-right:none;
+}
+@media screen and (max-width:765px) {
+  #slider-wraper {
+    position: fixed;
+	  top: 0px;
+    visibility: hidden;
+	  z-index: var(--bs-offcanvas-zindex);
+	  height: auto;
+/*	transition: var(--bs-offcanvas-transition);*/
+	  transition: transform 0.15s ease-in-out;
+    transform: translateX(-100%);
+	  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+  }
+  .offcanvas.show {
+    visibility: visible !important;
+	  transform: translateX(0%) !important;
+  }
 }
\ No newline at end of file

demoadmin/index/index.html

@@ -17,7 +17,7 @@
         <div class="col">
           <div class="row">
             <div class="col" id="search-wraper">此处显示  search 的内容</div>
-            <div class="col" id="userinfo-wraper">此处显示  userinfo 的内容</div>
+            <div class="col" id="userinfo-wraper">userinfo<a  data-bs-toggle="offcanvas" data-bs-target="#slider-wraper"  aria-controls="offcanvasExample"> menu </a></div>
           </div>
         </div>
       </div>
@@ -25,14 +25,8 @@
   </div>
   <div class="container" >
     <div class="row" id="middle-wraper">
-      <div class="col" id="slider-wraper">
-        <div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
-          <div class="offcanvas-header">
-            <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-          </div>
-          <div class="offcanvas-body"> Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. </div>
-        </div>
+      <div class="col offcanvas offcanvas-start" id="slider-wraper">
+    	aaa
       </div>
       <div class="col" id="content-wraper">
         <p>这是布局 P 标签的内容</p>