css - Twitter Bootstrap 2.1 附加插件无法正常工作

Question

作为标题...我使用带有词缀的 Bootstrap 2.1 作为侧边栏。但是当我向下滚动时，另一列突然向我的侧边栏下方移动，如下所示：

滚动之前：

滚动后：

这是我的代码：

    <section class="container">
      <article>
        <div class="row">
          <aside class="sidebar span3" data-offset-top="150" data-spy="affix">
            <ul class="nav nav-list">
              <li><a href="#toc_0">標題1<i class="icon-chevron-right pull-right"></i></a></li>
              <li><a href="#toc_1">標題2<i class="icon-chevron-right pull-right"></i></a></li>
              <li><a href="#toc_2">標題3<i class="icon-chevron-right pull-right"></i></a></li>
              <li><a href="#toc_3">標題4<i class="icon-chevron-right pull-right"></i></a></li>
              <li><a href="#toc_4">標題5<i class="icon-chevron-right pull-right"></i></a></li>
            </ul>
          </aside>
          <div class="span9">

Answer 1

当元素被“固定”时，元素的 CSS 变为position: fixed，这就是为什么你会遇到浮动问题。在 Bootstrap 文档页面上，Affix 插件始终附加到<ul>元素，而不是.sidebar.

尝试

<aside class="sidebar span3">
  <ul class="nav nav-list" data-spy="affix" data-offset-top="150">
    ...
  </ul>
</aside>

JSFiddle