滚动时，推入列中的Bootstrap Affix菜单与Safari中的主要内容重叠 [英] Bootstrap Affix menu within a pushed column overlaps main content in Safari when scrolling

问题描述

这可能是Bootstrap本身的错误，但我仍然很想知道是否有人可以提出解决方案或至少提供一些帮助。

This might be a bug within Bootstrap itself, but I'm still interested to see if anyone can come up with a fix or at least some help.

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

To jump straight to the issue, open this jsfiddle in Safari and start to scroll down the page: http://jsfiddle.net/davereed362205122/8bZxb/2/

方案：

我有一个两列页面设置，带有一个右列菜单和以下div：

I have a two column page setup with a right column menu and the following div:

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

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

(The menu needs to show up at the top on mobile devices, hence the push)

在div中是词缀菜单：

Within that div is the affix menu:

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

主要内容区域位于以下div中：

The main content area is within a div like this:

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

在Firefox和Chrome浏览器中一切正常，但是由于某些原因，在Safari中，词缀部分无法保留仅限于div，并且与主要内容重叠。看一下Bootstrap自己的网站（ http://getbootstrap.com/javascript/#affix ），看来他们没有对其div使用任何推或拉，因此菜单仅显示在移动设备的底部。我希望我不必还原到此...

Everything works really well in Firefox and Chrome, but for some reason in Safari the affix portion does not stay confined to the div and overlaps the main content. Taking a look at Bootstrap's own site (http://getbootstrap.com/javascript/#affix), it appears they don't use any push or pulls for their divs, so the menu simply shows up at the bottom in mobile. I'm hoping I don't have to revert to this...

推荐答案

我们想到的最好的解决方案是隐藏附加的列，并在其他地方显示相同的内容。

The best solution we came up with was to hide the affixed column and show the same content elsewhere. Instead of falsely re-ordering the columns with pushes and pulls.

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

这篇关于滚动时，推入列中的Bootstrap Affix菜单与Safari中的主要内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！