如何使用 always-visible 侧边栏正确布局 body？

Question

如果我有一个始终可见的 Semantic UI Sidebar（即设置了 visible class），我该如何正确布局相应的 pusher考虑侧边栏的宽度。长（或 right-aligned）元素似乎被截断，如本例所示：

<link href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.css" rel="stylesheet" />
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.js"></script>
<div class="ui vertical left visible sidebar menu">
  <a class="item">
    <i class="trophy icon"></i>
    Achievements
  </a>
</div>
<div class="pusher">
  <div class="ui left aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
  <div class="ui right aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
</div>

请注意 left-aligned header 如何按预期向左移动（即考虑了侧边栏的宽度），但第二行 right-aligned header, 被截断了——好像布局没有考虑到推送器的减少宽度。

Answer 1

显然这是一个错误或功能请求，请参阅相关票证：[Sidebar] Allow Sidebar to Start Visible #649 and [Sidebar] Allow Always Visible #807。

作为临时解决方案，我猜你可以这样做：

.pusher {
  width: calc(100% - 260px); /*260px is the sidebar width*/
}

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

<link href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.css" rel="stylesheet" />
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.js"></script>
<div class="ui vertical left visible sidebar menu">
  <a class="item">
    <i class="trophy icon"></i>
    Achievements
  </a>
</div>
<div class="pusher">
  <div class="ui left aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
  <div class="ui right aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
</div>

如何使用 always-visible 侧边栏正确布局 body？

How do I layout the body properly with an always-visible sidebar?

html

css

semantic-ui