Question

如果我有一个始终可见的Semantic UI Sidebar（即设置了visible类），我如何正确布局相应的pusher以使其占据侧边栏的宽度考虑到了。长（或右对齐）元素似乎被截断，如下例所示：

<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>

注意左对齐标题如何按预期向左移动（即侧边栏的宽度被考虑在内），但第二行（右对齐标题）被切断 - 好像布局没有' t考虑推进器的宽度减小。

Answer 1

显然这是一个错误或功能请求，请参阅相关的门票：[Sidebar] Allow Sidebar to Start Visible #649和[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>

如何使用始终可见的侧边栏正确布局身体？

1 个答案: