twitter-bootstrap - 如何使用 bootstrap 3 创建粘性左侧边栏菜单？

Question

我想用 bootstrap 3 创建一个左粘性栏菜单，例如:

http://getbootstrap.com/getting-started/

我会阅读给定的文档 http://getbootstrap.com/javascript/#affix

我尝试使用 .affix但结果为零。

更新 :@斯凯利，
谢谢你的好榜样。是的，我想要你的例子。我会下载你的示例 html，但下载后 html 文件的侧栏在那里不起作用。

Answer 1

Bootstrap 3

这是一个有效的左侧边栏示例:

http://bootply.com/90936(类似于 Bootstrap 文档)

诀窍是使用 affix 组件和一些 CSS 来定位它:

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

  #sidebar.affix {
    position: fixed;
    top:70px;
    width:228px;
  }

编辑 - 另一个 example with footer and affix-bottom

Bootstrap 4

Affix 组件已在 Bootstrap 4 中删除，因此要创建粘性侧边栏，您可以使用 3rd 方 Affix 插件 像这个 Bootstrap 4 sticky sidebar example ，或者使用 sticky-top 类 是 explained in this answer 。

相关:Create a responsive navbar sidebar "drawer" in Bootstrap 4?