Twitter-bootstrap 3在调整窗口大小和页脚时附加侧边栏重叠内容答案

【问题标题】：Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footerTwitter-bootstrap 3在调整窗口大小和页脚时附加侧边栏重叠内容
【发布时间】：2014-01-28 12:18:27
【问题描述】：

当我将 affix 用于 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;
}

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 affix

【解决方案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-*。

【讨论】：

效果很好。页脚呢？侧边栏与页脚重叠。
这就是 affix-bottom 的用途：bootply.com/104641 -- 请参阅 Bootstrap 文档：getbootstrap.com/javascript/#affix 了解更多信息。
如果有什么不同的话，我使用的是wordpress，所以在我的主题中我包含了页脚。
非常感谢您花时间帮助我。祝你有美好的一天，你帮了我很大的忙。

【解决方案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();
});

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

【讨论】：