在語義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>

來源

2014-08-27 shaft

正在搜索相同的東西。我認爲它不被支持，即使它會帶來一個很好的補充，尤其是對於帶有圖標的較小側邊欄。 – 2016-02-04 22:18:39

https://stackoverflow.com/questions/25527261/pulling-button-to-the-bottom-in-a-semantic-ui-sidebar## – chethu 2017-12-18 12:37:49

似乎沒有提供原生semantic-ui（V2.2.2 <）是指這樣做。

您可將重複按鈕，在側邊欄添加一個flexbox容器的底部：

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

然後groupping 社交媒體按鈕，一個子元素（默認樣式），以及重複按鍵在其他：

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

JSFiddle example

來源

2016-08-01 19:16:38 Kemi

在語義UI邊欄中將按鈕拉到底部

回答

相關問題