如何以編程方式更改Bootstraps屏幕寬度斷點？

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>