ブートストラップの画面幅のブレークポイントをプログラム的に変更するにはどうすればよいですか？

Question

私のウェブページには、ユーザーがフォームに記入する必要があるときはいつでも、右から動かすフルハイトの300pxのサイドバーがあります。

このサイドバーの問題は、メインコンテンツエリアのグリッドレイアウトを壊してしまうことです。なぜなら、オーバーレイではなくコンテンツをプッシュしているからです。

プログラムによって、サイドバーが開いているときを検出できます。また、Bootstrapのメディアクエリブレークポイントが開いているときはいつでも変更したいと思います。

これは可能ですか？

少数のスクリーンショット：

Answer 1

あなたはflexboxesでこれを達成することができ、ブートストラップは、そのために設計されていません。

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>