基于Bootstrap网格系统的可折叠侧边栏特效 Using the Bootstrap grid system, some CSS and a little jQuery to create a collapsible sidebar

#sidebar .col-md-3

Has a negative left margin when collapsed.

#sidebar {
  /* for the animation */
  transition: margin 0.3s ease;
}

.collapsed {
  /* hide it for small displays*/
  display: none;
}

@media (min-width: 992px) {
  .collapsed {
    display: block;
    /* same width as sidebar */
    margin-left: -25%;
  }
}

#content .col-md-9 .col-md-12

Changes from .col-md-9 to .col-md-12 when the sidebar is collapsed, occupying the remaining space.

#row-main {
  /* necessary to hide collapsed sidebar */
  overflow-x: hidden;
}

#content {
  /* for the animation */
  transition: width 0.3s ease;
}

/* to toggle the sidebar, just switch the CSS classes */
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");