我想使用Bootstrap 3创建一个左侧固定的导航栏菜单,类似于:
http://getbootstrap.com/getting-started/
我阅读了提供的文档http://getbootstrap.com/javascript/#affix
我尝试使用.affix
,但结果为零。
更新: @Skelly,
感谢您的慷慨示例。是的,我想要像您的示例一样。我已经下载了您的示例html文件,但在下载后,侧边栏无法正常工作。
我想使用Bootstrap 3创建一个左侧固定的导航栏菜单,类似于:
http://getbootstrap.com/getting-started/
我阅读了提供的文档http://getbootstrap.com/javascript/#affix
我尝试使用.affix
,但结果为零。
更新: @Skelly,
感谢您的慷慨示例。是的,我想要像您的示例一样。我已经下载了您的示例html文件,但在下载后,侧边栏无法正常工作。
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
类,如此答案中所述。
#mainCol h2 {padding-top: 55px; margin-top: -55px;}
http://codeply.com/go/chA684SPpu - Carol Skellyaffix
组件已经不再包括了:
删除了Affix jQuery插件。我们建议使用position: sticky Polyfill。
我在我的代码中使用了这种方式
$(function(){
$('.block').affix();
})
.fixed
类,则无法在没有JS的情况下解决此问题。 - Evgeniy