css - 在语义 ui 侧边栏中将按钮拉到底部

Question

我正在使用语义 UI 来布局侧边栏。

以下示例显示了一个侧边栏，其中一个按钮使用 被推到底部positioning:absolute。是否有一种意识形态的方式可以在不需要自定义样式的情况下在语义 UI 中进行安排？该类bottom不适用于按钮。

<div class="ui very thin styled sidebar active">
  <div class="ui fluid vertical icon buttons">
    <div class="ui facebook button">
      <i class="facebook icon"></i>
    </div>
    <div class="ui twitter button">
      <i class="twitter icon"></i>
    </div>
    <div class="ui google plus button">
      <i class="google plus icon"></i>
    </div>
    <div class="ui repeat button" style="position:absolute;bottom:10px;">
      <i class="reorder icon"></i>
    </div>
  </div>
</div>

Answer 1

似乎没有本地semantic-ui(v2.2.2<) 方法可以做到这一点。

您可以将重复按钮放在侧边栏的底部添加一个flexbox容器：

.flex-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

然后将社交媒体按钮分组到一个子元素（具有默认样式）中，将重复按钮分组到另一个子元素中：

.bottom-aligned {
  margin: 0px;
  margin-top: auto;
}

JSFiddle 示例