<header id="header" style="background-position: 0% 0px;">
<a class="image avatar" style="cursor: pointer;">
<img src="resources/images/Nimesh.jpg" alt=""></a>
<h1><strong>Ata at Turpis</strong>,cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>
<ul class="nav nav-tabs nav-stacked" data-spy="affix" >
<li class="active"><a href="#section-1">Section One</a></li>
<li><a href="#section-2">Section Two</a></li>
<li><a href="#section-3">Section Three</a></li>
<li><a href="#section-4">Section Four</a></li>
<li><a href="#section-5">Section Five</a></li>
</ul>
</header>
<div id="profileImage">
</div>
<div id="main">
<div id="section-1" class="background">
<div class="col-lg-6">
<!--content 1a -->
</div>
<div class="col-lg-6">
<!--content 1a -->
</div>
</div>
<div id="section-2" class="background">
<div class="col-lg-6">
<!--content 2a -->
</div>
<div class="col-lg-6">
<!--content 2b -->
</div>
</div>
<div id="section-3" class="background">
<div class="col-lg-6">
<!--content 3a -->
</div>
<div class="col-lg-6">
<!--content 3b -->
</div>
</div>
<div id="section-4" class="background">
<div class="col-lg-6">
<!--content 4a -->
</div>
<div class="col-lg-6">
<!--content 4b -->
</div>
</div>
<div id="section-5" class="background">
<div class="col-lg-6">
<!--content 5a -->
</div>
<div class="col-lg-6">
<!--content 5b -->
</div>
</div>
</div>
解决方法
>使用引导网格系统(例如col-lg-6)
>使用Bootstrap Affix与您的版本
引导网格系统
为了使网格系统正常工作,需要3个类：.container,.row,.col-xs- *.
> .container：应该添加到文档的包装器.
> .row：当您要设置列时,必须用.row包装器来包装这些列.
> .col-xs- *：您可以在此设置内容的宽度.
所以你的文件应该是这样的：
<div class="container">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
</div>
</div>
在你的情况下,似乎你没有为你的列提供.row或.container,所以实际的布局在一定程度上会被破坏和意外.我认为这可能是为什么如果你删除那些col-lg- *类它的工作原理.
Bootstrap贴纸
粘贴的official document实际上很模糊.基本上,当您向下滚动文档时,< div data-spy =“affix”>元素将从以下状态转移：
>加载.affix-top添加到您的间谍元素
>无论何时滚动到data-offset-top的值,它将删除.affix-top类,并将.affix类添加到同一个元素.
>无论何时滚动到data-offset-bottom的值,它将删除.affix类,并将.affix-bottom类添加到同一个元素.
正如上面提到的文件,你有必要设置这些类的CSS规则,使贴缀插件可以工作.
你必须设置3个重要的规则：
.affix-top,.affix,.affix-bottom的宽度
2.固定元素的位置
3.将.affix-底部位置从固定位置恢复到绝对位置
所以你的css将是这样的：
.affix {
top: 0;
width: 100%;
}
.affix-top {
width: 100%;
}
.affix-bottom {
position: absolute;
width: 100%;
}
这是一个粗略的Codepen使用贴图的例子.无论您是否在您的部分添加col-lg-6,我已经复制了您的代码,它的工作原理.您可以调整窗口大小以查看您的2列布局.
有一点需要提到的是,我不太确定为什么你把你的标签元素放在你的标题中,因为它用于在大多数设计案例中显示侧边栏的标题列表.有了这个意义上,我将其从标题移动到主区域,并以网格中的列设置.
希望这将有所帮助.
