Semantic-UI 侧边栏转换问题答案

【问题标题】：Semantic-UI Sidebar transition issueSemantic-UI 侧边栏转换问题
【发布时间】：2018-11-25 03:15:59
【问题描述】：

我是 webdev 的新手。我正在尝试使用语义 ui 来构建一个简单的门户网站。

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

但无论我在 semantic-ui 的侧边栏（推/缩放）上选择什么设置/转换方法，身体的某些部分都会移出屏幕。我只想让内容在不超过视口宽度的情况下缩小和扩大。这是我的 code 的 jsfiddle 显示问题： https://jsfiddle.net/vinu_tlg/L5eqt3f4/

谁能告诉我如何在语义 UI 中实现这种行为。

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

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

【问题讨论】：

【解决方案1】：

添加此样式

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

更新 fiddle

【讨论】：

谢谢。我理解代码的第一部分，但你能不能。解释您将 bg-color 设置为白色的第二部分？它有什么意义？我也看到过渡非常突然。有什么办法可以让事情变得顺利吗？非常感谢您的帮助。
我添加了白色，因为当它回到原来的位置时，主要内容后面会看到灰色背景。您可以尝试删除该样式，您会看到。至于过渡，我尝试了一些东西，但没有奏效，我会再试一次，让你知道:)
@exp8 尝试添加这个 .pushable>.pusher { transition: all 1s ease; }