3

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

4

2 回答 2

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>
于 2014-07-10T16:31:47.623 回答
0

尚无法发表评论，因此这是对该问题的附加参考，不一定是答案。

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

于 2014-06-11T10:03:10.333 回答