如何以编程方式更改Bootstraps屏幕宽度断点？

Question

在我的网页上，我有一个全高300px的侧边栏，只要用户需要填写表单，就可以从右边动画。

这个侧边栏的问题在于它弄乱了主要内​​容区域的网格布局，因为它正在推送内容而不仅仅是叠加层。

以编程方式我可以检测侧边栏何时打开。而且我想在它打开时更改Bootstrap媒体查询断点。

这可能吗？

几个截图：

Answer 1

您可以使用flexboxes实现此功能，而bootstrap并非专为此设计。

＆＃13;

＆＃13;

function toggleSidebar() {
  const cls = 'is-sidebar-open';
  const wrapper = document.querySelector('.wrapper');
  
  return wrapper.classList.contains(cls) 
    ? wrapper.classList.remove(cls)
    : wrapper.classList.add(cls)
  ;
}

document.addEventListener('DOMContentLoaded', () => {
  return document
    .querySelector('#toggleSidebar')
    .addEventListener('click', toggleSidebar)
  ;
})

＆＃13;

.main {
  flex: 1 1 100%;
  background: gray;
}

.sidebar {
  flex: 0 0 0;
  background: cyan;
  transition: 450ms all linear;
}

.wrapper {
  display: flex;
  min-height: 400px;
}

.wrapper.is-sidebar-open .sidebar {
  flex-basis: 100px;
}

＆＃13;

<button id="toggleSidebar">Open Sidebar</button>

<div class="wrapper">
  <div class="main"></div>
  <div class="sidebar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;