語義UI側欄過渡問題

Question

是webdev的新手。 我正在嘗試使用語義UI構建一個簡單的Web門戶。

我在使用側欄組件時遇到問題。 我希望側邊欄行為類似於此頁面 https://adminlte.io/themes/AdminLTE/index2.html ，其中在顯示/折疊側邊欄時，正文內容會縮小/擴展。

但是，無論我在語義UI的側欄上（按/縮放）選擇哪種設置/轉換方法，主體的某些部分都會移出屏幕。 我只希望內容在不超過視口寬度的情況下縮小和擴展。 這是顯示問題的代碼的jsfiddle： https://jsfiddle.net/vinu_tlg/L5eqt3f4/ ://jsfiddle.net/vinu_tlg/L5eqt3f4/

誰能讓我知道如何在語義UI中實現此行為。

有幾分相似的問題提出較早 ，但我沒有看到關於如何實現它的任何答復。

感謝任何指針。 提前致謝。

Answer 1

添加此樣式

.sidebar.visible + .pusher {
  width: calc(100% - 260px);
}
body.pushable {
   background-color: white !important;
}

更新的小提琴