如何使用bootstrap 3创建粘滞的左侧边栏菜单？

Question

我想创建一个带有bootstrap 3的左粘条菜单,如:

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

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

我尝试.affix但结果为零.

---

更新:@Skelly,
谢谢你的好榜样.是的,我想要你的榜样.我下载你的示例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;
  }

编辑 - 另一个有页脚和词缀底部的例子

Bootstrap 4

词缀分量在引导4被删除,所以要创建一个棘手的侧边栏,你可以使用一个第三方插件缀这样引导4粘边栏例子,或使用sticky-top类是在这个答案解释.

相关:在Bootstrap 4中创建响应式导航栏侧边栏"抽屉"？

Answer 2

您也可以尝试使用像Fixed-Sticky这样的Polyfill .特别是当您使用Bootstrap4时,不再包含该affix组件:

删掉了Affix jQuery插件.我们建议使用位置:粘性polyfill.

Answer 3

我在我的代码中使用了这种方式

$(function(){
    $('.block').affix();
})