Semantic-UI 边栏过渡问题

Question

我是 webdev 的新手。我正在尝试使用 semantic-ui 构建一个简单的 Web 门户。

我在使用边栏组件时遇到问题。我希望侧边栏行为像这样 page https://adminlte.io/themes/AdminLTE/index2.html，其中 body 内容在侧边栏为 shown/collapsed 时收缩/扩展。

但是无论我在 semantic-ui 的边栏 (push/scale) 上选择什么设置/过渡方法，body 的某些部分都会移出屏幕。我只希望内容在不超过视口宽度的情况下收缩和扩展。这是显示问题的 code 的 jsfiddle： https://jsfiddle.net/vinu_tlg/L5eqt3f4/

谁能告诉我如何在 semantic-ui 中实现此行为。

有人问了一个有点类似的问题 earlier 但我没有看到任何关于如何实现它的答案。

感谢任何指点。提前致谢。

Answer 1

添加此样式

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

已更新 fiddle

Semantic-UI 边栏过渡问题

Semantic-UI Sidebar transition issue

html

javascript

css

semantic-ui

semantic-ui-css