如何使用引导程序 3 创建粘性左侧边栏菜单? [英] How to create a sticky left sidebar menu using bootstrap 3?

问题描述

我想用引导程序 3 创建一个左粘性栏菜单，例如:

I want to create a left-sticky bar menu with bootstrap 3 like:

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

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

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

I try with .affix but the result is zero.

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

Update: @Skelly,
Thanks for your kind example. and yes, I want like your example. I'd download your example html, but after download the html file's side bar didn't work there.

推荐答案

Bootstrap 3

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

Here is a working left sidebar example:

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

http://bootply.com/90936 (similar to the Bootstrap docs)

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

The trick is using the affix component along with some CSS to position it:

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

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

EDIT- 另一个 带有页脚和词缀的示例-底部

引导程序 4

Bootstrap 4 中删除了 Affix 组件，因此要创建粘性侧边栏，您可以使用 第 3 方 Affix 插件，例如 Bootstrap 4 粘性侧边栏示例，或使用 sticky-top class 在此答案中解释.

The Affix component has been removed in Bootstrap 4, so to create a sticky sidebar, you can use a 3rd party Affix plugin like this Bootstrap 4 sticky sidebar example, or use the sticky-top class is explained in this answer.

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

这篇关于如何使用引导程序 3 创建粘性左侧边栏菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！