html - Twitter-bootstrap 3 在窗口调整大小和页脚时贴上侧边栏重叠内容

Question

当我对 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

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

.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-*.