将按钮拉到语义化UI侧边栏底部

Question

我正在使用semantic-ui来布局侧边栏。

以下示例显示一个带有按钮的侧边栏，使用positioning:absolute将其推到底部。在semantic-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>

- shaft

---

正在搜索相同的东西。我认为即使它会为较小的带有图标的侧边栏增添不少美观，但它似乎并不被支持。 - Romeo Mihalcea

https://dev59.com/PYLba4cB1Zd3GeqPkNys - chethu

Answer 1

看起来，没有本地的semantic-ui（v2.2.2<）可以这样做。

您可以在侧边栏底部添加一个flexbox容器来放置repeat按钮：

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

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

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

JSFiddle example

- Kemi