滚动时，推送列中的引导附加菜单与 Safari 中的主要内容重叠答案

【问题标题】：Bootstrap Affix menu within a pushed column overlaps main content in Safari when scrolling滚动时，推送列中的引导附加菜单与 Safari 中的主要内容重叠
【发布时间】：2014-03-19 16:26:13
【问题描述】：

这可能是 Bootstrap 本身的一个错误，但我仍然有兴趣看看是否有人可以提出修复或至少提供一些帮助。

要直接跳到问题，在 Safari 中打开这个 jsfiddle 并开始向下滚动页面： http://jsfiddle.net/davereed362205122/8bZxb/2/

场景：

我有一个包含右栏菜单和以下 div 的两栏页面设置：

<div class="col-md-push-9 col-md-3">

（菜单需要显示在移动设备的顶部，因此需要推送）

在那个 div 中是词缀菜单：

<div id="affix-menu" data-spy="affix" >

主要内容区域在这样的 div 中：

<div class="col-md-9 col-md-pull-3">

在 Firefox 和 Chrome 中一切都运行良好，但在 Safari 中出于某种原因，词缀部分并不局限于 div 并与主要内容重叠。看看 Bootstrap 自己的网站 (http://getbootstrap.com/javascript/#affix)，他们似乎没有为他们的 div 使用任何推或拉，所以菜单只是显示在移动设备的底部。我希望我不必回到这个...

【问题讨论】：

标签： twitter-bootstrap safari affix

【解决方案1】：

我们想出的最佳解决方案是隐藏附加的列并在其他地方显示相同的内容。而不是通过推拉错误地重新排序列。

<section class="visible-xs">
    NORMALLY AFFIXED CONTENT
</section>
<section class="col-sm-8">
    MAIN
</section>
<section class="col-sm-4 hidden-xs">
    <div id="affix-menu" data-spy="affix" >AFFIXED CONTENT</div>
</section>

【讨论】：

【解决方案2】：

尚不能发表评论，因此这是对问题的补充参考，不一定是答案。

mdo 在 github https://github.com/twbs/bootstrap/issues/12126 上说这是一个问题，但随后胖子关闭了它说“......要解决这个问题，您只需要确保您对应用的类进行了适当的样式设置。”

【讨论】：