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 像素（引导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-* 。

Answer 2

我希望

词缀在调整列大小时具有响应性，因此我想出了一个非常简单的解决方案。

我们要做的是将附加词缀的宽度与调整网格大小时所在的列的宽度相匹配。

要做到这一点，你需要做的就是给你的列并附加一个 Id。 （或者以某种方式用javascript引用元素）

我选择了javascript解决方案。

function fixAffix() {
    try {
        // Bootstrap affix will overflow columns 
        // We'll fix this by matching our affix width to our affixed column width
        var bb = document.getElementById('affixColumn').getBoundingClientRect(),
            columnWidth = bb.right - bb.left;
        // Make sure affix is not past this width.
        var affixElm = document.getElementById('affixDiv');
        affixElm.style.width = (columnWidth - 30) + "px";
        // We can also define the breakpoint we want to stop applying affix pretty easily
        if (document.documentElement.clientWidth < 975) 
            affixElm.className = "";
        else
            affixElm.className = "affix";
    }
    catch (err) {
        alert(err);
    }
}

$(window).resize(function () {
       fixAffix();
   });
$(document).ready(function () {
    fixAffix();
});

我包含了一些代码来删除指定断点处的词缀。这是特定于我的应用程序，但您很可能也想做这样的事情来阻止较小设备上的附加词缀。