html - 语义 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

如果您不想“推送”Semantic UI sidebars 的内容你应该使用 .overlay类 - relevant demos

正如类名所暗示的那样，它将覆盖侧边栏而不是将内容与其一起推送。

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

JSfiddle