Html Twitter引导程序3在调整窗口大小和页脚时附加了与内容重叠的侧栏

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

演示：

仅当屏幕宽度大于992像素（引导

col md-*

开始垂直堆叠的断点）时，才应应用

粘贴

此外，如果您想在较小的宽度上使用
词缀
，您可以将列更改为
列sm-*
或
列xs-*
，我希望在调整列的大小时词缀能够响应，因此我想出了一个非常简单的解决方案

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();
});

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

要做到这一点，您所需要做的就是为列指定一个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();
});

函数fixAffix（）{
试一试{
//引导粘贴将溢出列
//我们将通过匹配粘贴宽度和粘贴列宽来解决此问题
var bb=document.getElementById（'affixColumn'）.getBoundingClientRect（），
columnWidth=bb.右-bb.左；
//确保粘贴未超过此宽度。
var affixElm=document.getElementById（'affixDiv'）；
affixElm.style.width=（列宽-30）+“px”；
//我们还可以很容易地定义要停止应用的断点
if（document.documentElement.clientWidth<975）
affixElm.className=“”；
其他的
affixElm.className=“粘贴”；
}
捕捉（错误）{
警惕（err）；
}
}
$（窗口）。调整大小（函数（）{
固定粘贴（）；
});
$（文档）.ready（函数（）{
固定粘贴（）；
});

我已经包含了在指定断点处删除词缀的代码。这是特定于我的应用程序的，但您很可能也希望这样做，以停止较小设备上的粘贴
 这很有效。那页脚呢？侧边栏与页脚重叠。这就是粘贴底部的作用：--请参阅引导文档：了解更多信息。如果有什么不同，我使用的是wordpress，因此在我的主题中我包含页脚。我非常感谢您花时间帮助我。祝你度过愉快的一天，你帮了我很大的忙。
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();
});