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

【问题标题】：Semantic UI Sidebar pushes elements outside of screen width语义 UI 侧边栏将元素推送到屏幕宽度之外
【发布时间】：2020-05-14 02:22:51
【问题描述】：

我不确定我是否做错了什么，或者这是否是预期的结果，但我使用的是语义 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/

【问题讨论】：

你能解决这个问题吗？我也在寻找同样的东西。
同样的问题你发现了吗？

标签： html css sidebar semantic-ui

【解决方案1】：

如果您不希望 Semantic UI sidebars 的内容“推送”，您应该在其上使用 .overlay 类 - relevant demos

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

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

JSfiddle

【讨论】：

知道如何推动它，但仍然为屏幕尺寸设置适当的最大宽度？
@RoshephJackson 我不确定我是否遵循 - 如果内容被推送，它不应该溢出并允许用户滚动，如果发生这种情况，那么标记有问题跨度>
为了获得漂亮的“出现菜单”效果，您希望内容被推送，但也需要减小其宽度，而不是溢出。例如，如果您希望菜单通常保持在左侧但也可以隐藏。如果菜单不打算保留，则未调整叠加层。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：