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

Question

我在引导程序中创建了一个侧边栏,并且希望在侧边栏的底部固定一个注销按钮.我怎么做到这一点？我已经包含了我正在使用的代码的小提琴: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

绝对元件将相对于被定位为与其最接近的定位的祖先(即realtive,绝对的,固定的).在您的情况下,它相对于固定容器定位,而不是它的父级.这是修复.

演示2:JSFIDDLE

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