如何使用Bootstrap 3创建一个固定的左侧边栏菜单？

Question

如何使用Bootstrap 3创建一个固定的左侧边栏菜单？

twitter-bootstraptwitter-bootstrap-3sidebarsticky

33

我想使用Bootstrap 3创建一个左侧固定的导航栏菜单，类似于：

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

我阅读了提供的文档http://getbootstrap.com/javascript/#affix

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

更新: @Skelly，
感谢您的慷慨示例。是的，我想要像您的示例一样。我已经下载了您的示例html文件，但在下载后，侧边栏无法正常工作。

- Sohag-Monist It

1

可能是重复的问题：https://dev59.com/1nfZa4cB1Zd3GeqPRm8g#19144753 - Carol Skelly

5

如果你已经掌握了答案，就应该回答问题来帮助其他人。 - Rich Tier

你可以在以下收藏中找到一个固定的左侧边栏菜单之一： http://www.designerslib.com/bootstrap-sidebar-menu-templates/ - Karuppiah RK

3个回答

6

您还可以尝试使用类似于Fixed-Sticky的Polyfill。特别是在使用Bootstrap4时，affix组件已经不再包括了：

删除了Affix jQuery插件。我们建议使用position: sticky Polyfill。

- H6.

那个插件现在已被弃用，根据您提供的链接。 - user20358

5

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

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

- Evgeniy

在不必要的情况下使用JavaScript / jQuery是一个可怕的想法，当可以用CSS解决时。 - Wade

1

@WadeShuler，如果您要根据页面滚动切换.fixed类，则无法在没有JS的情况下解决此问题。 - Evgeniy

我在半夜浏览了这个页面。这个问题的标题是关于一个粘性侧边栏，可以使用CSS而不需要任何JS来完成。他链接到了一个关于affix的来源。所以这取决于他是否想要affix的功能，还是只是想要一个固定在页面侧边的侧边栏。如果他不想/不需要affix的好处，纯CSS选项就可以完成工作，那么他就不需要使用任何额外和不必要的JS。我坚信保持源代码的清洁。我不加载任何我不需要的脚本，也没有我不需要的代码。 - Wade

2

@WadeShuler，完全同意您的观点，不要在CSS任务中使用JS。但是固定侧边栏的Affix、Bootstrap Affix，需要与DOM进行交互，正如您所理解的那样，如果没有JS，它是无法解决的。我们不能确定作者想要达到什么目的，因此我已经发布了记录的API方法来实现“粘性导航栏”。 - Evgeniy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

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

Affix组件在Bootstrap 4中已被移除，因此要创建一个粘性边栏，您可以使用第三方Affix插件，例如这个Bootstrap 4粘性侧边栏示例，或者使用sticky-top类，如此答案中所述。

相关：在Bootstrap 4中创建响应式导航栏侧边栏“抽屉”？