Question

我使用semantic-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＆lt;）意味着这样做。

您可以在侧栏底部添加重复按钮，添加flexbox容器：

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

然后在一个子元素（默认样式）中填充社交媒体按钮，在另一个子元素中填充重复按钮：

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

JSFiddle example

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

1 个答案: