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

Question

在我的网页上，我有全高 300 像素的侧边栏，当用户需要填写表单时，它会从右侧开始动画。

这个侧边栏的问题是它扰乱了主要内​​容区域的网格布局，因为它是在推送内容而不是仅仅作为一个覆盖层。

我可以通过编程检测侧边栏何时打开。我想在打开时更改 Bootstrap 媒体查询断点。

这可能吗？

几张截图:

Answer 1

您可以使用 flexboxes 实现这一点，bootstrap 不是为此而设计的。

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)
  ;
})

.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;
}

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

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