如何在Bootstrap中制作一个粘性边栏？ [英] How to make a sticky sidebar in Bootstrap?

问题描述

我怎样才能制作一个像这个cpmta.org这样的粘性侧栏，但是使用Bootstrap？我很难试图做到这一点......

解决方案

它已经存在于Bootstrap中，它被称为Bootstrap Affix。这是代码：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（＃myNav）。affix（{
 offset：{
 bottom：195 
} 
}）; 
}）; 
< / script> 
  

您可以添加 data-spy

 < ul class =nav nav-tabs nav-stackeddata-spy =affixdata-偏移顶= 195 > 
< li class =active>< a href =＃one>第一部分< / a>< / li> 
< li>< a href =＃two>第二部分< / a>< / li> 
< li>< a href =＃three>第三部分< / a>< / li> 
< / ul> 
  

有关更多信息，请按照以下说明操作：

• 使用引导程序创建固定元素


• 了解Bootstrap的Affix和ScrollSpy插件

How can I make a sticky sidebar like this one, cpmta.org, but with Bootstrap? I am having a hard time trying to do this...

解决方案

It's already there in Bootstrap and it is called Bootstrap Affix. This is the code:

<script type="text/javascript">
$(document).ready(function () {
    $("#myNav").affix({
        offset: { 
            bottom: 195 
        }
    });
});
</script>

And you can add the data-spy as well:

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="195">
    <li class="active"><a href="#one">Section One</a></li>
    <li><a href="#two">Section Two</a></li>
    <li><a href="#three">Section Three</a></li>
</ul>

For more information, kindly follow the instructions from:

• Creating Pinned Element with Bootstrap
• Understanding Bootstrap’s Affix and ScrollSpy plugins

这篇关于如何在Bootstrap中制作一个粘性边栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！