Twitter-bootstrap 3 在调整窗口大小以及页脚时固定侧边栏重叠内容

当我使用 Bootstrap 3 的 Affix 并调整窗口大小时，我遇到了重叠侧边栏的问题。有没有办法添加一些 css 类，以便菜单附加到顶部而不是与列重叠？

该列也与页脚重叠。任何帮助将不胜感激。看来很多人都有同样的问题。

这是 HTML：

<div class="container">
<div class="row">
    <div class="col-md-4 column">
                <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130">
              <li><a href="#software"><b>Software</b></a></li>
                    <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                    </ul>

           </ul>

    </div>
    <div class="col-md-8 column">
            <p>blah, blah, blah</p>
            <hr>
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>
 <p>
 blah, blah, blah...</p><br><br>

    </div>
   </div>
  </div>

这是CSS：

#sidebar.affix-top {
position: static;
}

#sidebar.affix {
position: fixed;
top: 100px;
}

Demo: http://bootply.com/104634

您应该只应用affix当屏幕宽度大于992像素时（Bootstrap的断点col-md-*开始垂直堆叠）。

.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}

另外，如果您想使用affix在较小的宽度上，您可以将列更改为col-sm-* or col-xs-*.