Question

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

我在使用侧边栏组件时遇到了问题。我希望侧边栏行为与此page https://adminlte.io/themes/AdminLTE/index2.html类似，其中正文内容在显示/折叠侧边栏时缩小/展开。

但是无论我在语义ui侧边栏（推/缩）选择的设置/转换方法，身体的某些部分移出屏幕。我只希望内容缩小和扩展而不超过视口宽度。这是我code的jsfiddle，显示了这个问题： https://jsfiddle.net/vinu_tlg/L5eqt3f4/

任何人都可以告诉我如何在语义ui中实现这种行为。

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

欣赏任何指针。提前致谢。

Answer 1

添加此款式

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

更新 fiddle