3

これは Bootstrap 自体のバグかもしれませんが、誰かが修正または少なくともいくつかの助けを思い付くことができるかどうかを知りたいです.

問題に直接ジャンプするには、この jsfiddle を Safari で開き、ページを下にスクロールし始めます: http://jsfiddle.net/davereed362205122/8bZxb/2/

シナリオ:

右側の列メニューと次の div を含む 2 列のページ設定があります。

<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 では何らかの理由で affix 部分が 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 に答える