当窗口调整大小时,Twitter-bootstrap 3附加了侧边栏重叠内容,也是页脚

Question

当我使用affix for bootstrap 3并调整窗口大小时,我遇到了重叠侧边栏的问题.有没有办法添加一些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;
}

Answer 1

演示: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-*或col-xs-*.