Question

这可能是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使用任何推或拉，所以菜单只显示在移动设备的底部。我希望我不必再回到这个......

Answer 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>

Answer 2

无法发表评论所以这是对问题的补充参考，不一定是答案。

mdo在github https://github.com/twbs/bootstrap/issues/12126上说它是一个问题，但随后胖子关闭它说＆＃34; ...为了解决这个问题，你只需要确保你正确地设计应用的类＆＃34;

当滚动时，推送列中的Bootstrap Affix菜单与Safari中的主要内容重叠

2 个答案: