更新

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

绝对元素将相对于其最近的定位的祖先（即，实际的，绝对的，固定的）定位。在您的情况下，它相对于固定容器定位，而不是它的父级。这是修复。

演示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>

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

2 个答案:

更新

更新2