将按钮固定到侧边栏的底部？

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>