侧边栏切换时如何响应页面内容？

Question

我正在创建一个左侧边栏的网页。并在页面内容中 Bootstrap 4 个固定大小的卡片。

当它切换在视口大小 - >768px 到 100 像素时，页面内容不会响应响应（全部重叠和压缩）。

为什么？看看 @media(min-width:768px){...}。

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

body {
  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: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  width: 0;
  height: 100%;
  overflow-y: auto;
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.sidebar {
  left: 250px;
  margin-left: -250px;
}

#wrapper.toggled .sidebar {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
}

#wrapper.toggled #page-content-wrapper {
  margin-right: -250px;
}

@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #wrapper .sidebar {
    width: 250px;
  }
  #wrapper.toggled .sidebar {
    width: 0;
  }
  #page-content-wrapper {
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="wrapper">
  <div id="sidebar-wrapper" class="sidebar">
    <ul>
      <li>Dashboard</li>
    </ul>
  </div>
  <div id="page-content-wrapper">
    <div class="container-fluid">
      <h1>Simple Sidebar</h1>
      <a class="btn btn-secondary" href="#menu-toggle-left" id="menu-toggle">Toggle Left</a>
      <div class="row">
        <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
          <div class="card bg-primary" style="width:10rem;height:10rem;">
            <div class="card-header">
              <div class="card-title">Title 1</div>
            </div>
            <div class="card-body text-center">
              <p>This is a paragraph</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
          <div class="card bg-primary" style="width:10rem;height:10rem;">
            <div class="card-header">
              <div class="card-title">Title 2</div>
            </div>
            <div class="card-body text-center">
              <p>This is a paragraph</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
          <div class="card bg-primary" style="width:10rem;height:10rem;">
            <div class="card-header">
              <div class="card-title">Title 3</div>
            </div>
            <div class="card-body text-center">
              <p>This is a paragraph</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
          <div class="card bg-primary" style="width:10rem;height:10rem;">
            <div class="card-header">
              <div class="card-title">Title 4</div>
            </div>
            <div class="card-body text-center">
              <p>This is a paragraph</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何纠正？谢谢。

Answer 1

这里有一个简单的解决方案，将style="width:100vw;"添加到<div class="row"></div>

 <div id="wrapper">
  <div id="sidebar-wrapper" class="sidebar">
    ...
  </div>
  <div id="page-content-wrapper">
    <div class="container-fluid">
      ...
      <div class="row" style="width:100vw;">
        ...
      </div>
    </div>
  </div>