將按鈕固定到側邊欄的底部？

Question

我在bootstrap中創建了一個側欄，並希望將註銷按鈕固定到側欄的底部。我怎麼做到這一點？已經包含了我正在使用的代碼的小提琴： http://jsfiddle.net/ukcfdm77/

這個例子的實際網址爲：

http://getbootstrap.com/examples/dashboard/ 

Answer 1

因此，如果這是你的實際的側邊欄，你可以只添加註銷按鈕是這樣的：

更新

JSFiddle

<div class="col-sm-3 col-md-2 sidebar"> 
    <ul class="nav nav-sidebar" hidden> 
    <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li> 
    <li><a href="#">Reports</a></li> 
    <li><a href="#">Analytics</a></li> 
    <li><a href="#">Export</a></li> 
    </ul> 
    <ul class="nav nav-sidebar"> 
    <li><a href="">Nav item</a></li> 
    <li><a href="">Nav item again</a></li> 
    <li><a href="">One more nav</a></li> 
    <li><a href="">Another nav item</a></li> 
    <li><a href="">More navigation</a></li> 
    </ul> 
    <ul class="nav nav-sidebar"> 
    <li><a href="">Nav item again</a></li> 
    <li><a href="">One more nav</a></li> 
    <li><a href="">Another nav item</a></li> 
    </ul> 
    <ul id="logout_sidebar_button" class="nav nav-sidebar"> 
     <li><a href="#">Signout</a></li> 
    </ul> 

css

個

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
html, body { 
    width: 100%; 
    height:100%; 
} 

#logout_sidebar_button { 
    position: absolute; 
    display: inline-block; 
    bottom: 0; 
    left: 15px; 
} 

.sidebar { 
    color: white; 
    background:hsl(227, 49%, 89%); 
    position: relative; 
    min-height: 100%; 
    max-width: 260px; 
    padding-bottom: 40px; 
} 
.sidebar li { 
    margin-left: -15px; 
    margin-right: -15px; 
} 

更新2

絕對元件將被定位相對爲與其最接近的定位祖先（即真實的，絕對的，固定的）。就你而言，它是相對於固定容器定位的，而不是它的父級。這是修復。

演示2：JSFIDDLE

#sidebar_content { 
    position: relative; 
    min-height: 100%; 
    padding-bottom: 40px; 
} 

Answer 2

添加btn btn-*類的<a>標籤就可以了。在代碼替換<a href="">Logout</a>本

<li> 
    <a href="" class="btn btn-success">Logout</a> 
</li>