打开侧边栏时，在不改变宽度的情况下推送内容

Question

我有一个侧边栏，我在较小的屏幕上打开， 打开侧边栏时，我希望推送右侧的内容，但是当我在当前代码中执行此操作时，内容更改的div的宽度会根据其内容调整其内部的大小。宽度。因为它是响应性的。我里面有几个div。 这是JSFiddle MyCode

中的代码

此处我只将文字作为内容，因此您可以看到关闭侧边栏时文本的行为方式。

如何使推送的页面包装内容左右推送，但不改变宽度？

我的HTML代码：

<div id="wrapper">
<div class="overlay"></div>

<!-- Sidebar -->
<nav class="navbar  navbar-fixed-top set-height-nav flex-colum" id="sidebar-wrapper" role="navigation">
    asdasdadas
</nav>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">
    <button type="button" class="hamburger is-closed" data-toggle="offcanvas">
        <span class="hamb-top"></span>
        <span class="hamb-middle"></span>
        <span class="hamb-bottom"></span>
    </button>
    <div class="container-fluid">
       <h3>
       Lorem ipsum dolor sit amet, quo ex graeco option, elit malis eam et. Probo solet lucilius ea pri.
                        Civibus electram referrentur pri no, sea in brute adipisci eleifend. His at gubergren conclusionemque.
       </h3>
    </div>
</div>
<!-- /#page-content-wrapper -->

我的css：

body {
position: relative;
overflow-x: hidden;
}
*-------------------------------*/

 #wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
overflow: hidden;
/* width:100%; */    
width: 100%;
/* position: absolute; */
}
 #sidebar-wrapper {
z-index: 2000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 bottom: 0;
padding: 0;
display:block;
 }


#wrapper a.nav-link.active {
color: #1C2058;
font-weight: bold;
 }
 #sidebar-wrapper::-webkit-scrollbar {
 display: none;
  }
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;    
padding-top: 25px;
}
#wrapper.toggled #page-content-wrapper {    
position:absolute;
margin-right: -220px;
 }
/* Custom Css on Sidebar */

ul.full-width-navigation {
width: 220px;
}
.side .active {
position: relative;
}


nav.set-top-zindex {
background: #fff;
min-height: 50px;
/* display: none; */
}


.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250, 250, 250, .8);
z-index: 1;
}
/*sidebar */

@media screen and (min-width: 576px) {
#wrapper #sidebar-wrapper {
    width: 220px;
}
#wrapper.toggled #page-content-wrapper {
    padding-left: 0;
}
#wrapper #page-content-wrapper {
    padding-left: 220px;
}
button.hamburger.is-closed {
    display: none;
}
#sidebar-wrapper {
    z-index: 1;
}

}
@media screen and (max-width: 576px) {


#wrapper.toggled .overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, .8);
    margin-top: 69px;
    z-index: 1500;
    display: block;
}



}

任何帮助表示赞赏！ 谢谢！

编辑：

Current Fiddle

打开侧边栏时，它会将内容推送到220px。 当在侧边栏上按下关闭时，您可以看到内容中的字母如何随机播放，这是因为通过填充填充，页面包装内容的宽度变小，并且其内部的内容发生变化，因为它是响应式的。 。 我需要的是： 按侧边栏 - 内容似乎被推到220px的右侧。 关闭侧边栏 - 内容转换回其初始状态，左侧：0，侧边栏关闭。 需要在推拉之间来回转换。

Answer 1

我在CodePen上创建了这个simple example，您可以用它来帮助解决您的问题和学习。在演示中，单击“菜单”按钮切换侧边栏。

我认为您需要使用的方法是将主要内容区域“绝对”和“左侧”放置在侧边栏扩展时的宽度我通过切换包含这些属性的CSS类在演示中演示在主要内容区域。这样，当菜单打开时，响应式网格单元格保持相同的宽度。

我发现在CodePen上看到示例更容易，但我也在这里嵌入了我的示例：

$("button").on("click", function() {
  $(".sidebar").toggleClass('is-active');
})

body {
  margin: 0;
  overflow-x: hidden;
}
.sidebar {
  display: none;
  width: 220px;
  height: calc(100vh - 28px);
  background: #eee;
  border-right: #ccc;
  padding: 14px;
  position: relative;
  left: -220px;
}

.sidebar.is-active {
  display: block;
  left: 0;
  transition: all 2000ms ease;
}

.sidebar.is-active~.main-content {
  width: 100vw;
  height: calc(100vh - 28px);
  position: absolute;
  left: calc(220px + 28px);
}

.main-content {
  width: 100%;
  padding: 14px;
}

.row {
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
  justify-content: space;
}

.row .cell {
  width: 100%;
  background: #eee;
  padding: 14px;
}

.row .cell:nth-of-type(2) {
  border-right: 1px solid lightgray;
  border-left: 1px solid lightgray;
}

nav a {
  display: block;
  padding: 14px;
}

.menu-btn {
  position: absolute;
  right: 0;
  z-index: 9999;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="menu-btn">Menu</button>
<div class="wrapper">
  <div class="sidebar">
    <nav>
      <a href="#">Link #1</a>
      <a href="#">Link #2</a>
      <a href="#">Link #3</a>
      <a href="#">Link #4</a>
    </nav>
  </div>

  <div class="main-content">
    <div class="row">
      <h1>Main content</h1>
    </div>
    <div class="row">
      <div class="cell">
         Cell #1
      </div>
      <div class="cell">
         Cell #2
      </div>
      <div class="cell">
         Cell #3
      </div>
    </div>
  </div>
</div>