语义 UI 侧边栏将元素推送到屏幕宽度之外

Question

我不确定我是否做错了什么，或者这是否是预期的结果，但我正在使用语义 ui 的侧边栏，它会将所有内容推到最大屏幕宽度之外。我在这里错过了什么吗？

<div class="ui bottom attached segment pushable">
  <div class="ui left vertical menu visible thin attached inverted sidebar">
    <a class="item">
          Item 1
        </a>
    <a class="item">
          Item 2
        </a>
    <a class="item">
          Item 3
        </a>
  </div>
  <div class="pusher">
    <div id="search-bar">
      <div class="ui fluid action input">
        <input placeholder="Search..">
        <div class="ui green button"> Search </div>
      </div>
    </div>
    <h3 class="ui block header">
      Item
    </h3>
  </div>
</div>

https://jsfiddle.net/kour6d1x/

Answer 1

如果您不希望为语义UI侧边栏"推送"内容，则应在其上使用.overlay类 - 相关演示

就像类名所暗示的那样，它将覆盖侧边栏，而不是随之推送内容。

将类添加到<div class="ui left vertical menu visible thin attached inverted sidebar">元素overlay。

JSfiddle

Answer 2

我在下面使用了 css 来减少侧边栏打开时推送器的宽度。在下面的代码中58px是侧边栏的宽度

.sidebar.visible + .pusher{
    margin-right: 58px;
}

Answer 3

自定义 CSS 减去侧边栏的宽度就可以了：

.sidebar.visible + .pusher {
  width: calc(100% - 260px);
}