是webdev的新手。我正在尝试使用语义UI构建简单的Web门户。

我在使用侧栏组件时遇到问题。我希望侧边栏行为像这样的page https://adminlte.io/themes/AdminLTE/index2.html,其中在显示/折叠侧边栏时,正文内容会缩小/扩展。

但是,无论我在语义UI的侧栏上(按/缩放)选择哪种设置/转换方法,主体的某些部分都会移出屏幕。我只希望内容在不超过视口宽度的情况下缩小和扩展。
这是我的code的jsfiddle显示问题:
   https://jsfiddle.net/vinu_tlg/L5eqt3f4/

谁能让我知道我如何在语义UI中实现此行为。

earlier有一个类似的问题,但我看不到如何实现的任何答案。

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

最佳答案

添加此样式

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


更新
fiddle

09-19 08:24