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;
  }

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

Bootstrap 4

在Bootstrap 4中删除了Affix组件，因此要创建粘性侧边栏，您可以使用第三方Affix插件，例如Bootstrap 4 sticky sidebar example，或使用 { {1}}类是explained in this answer。

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

Answer 2

您也可以尝试使用像Fixed-Sticky这样的Polyfill。特别是当您使用Bootstrap4时，affix组件为no longer included：

删除了Affix jQuery插件。我们建议使用一个位置：粘性 polyfill而不是。

Answer 3

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

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

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

3 个答案: