Twitterのブートストラップ - 私はTwitterのブートストラップを使用していると私は、次のしている応答接辞

Question

：

<div class="row"> 

    <div class="span3"> 
     <div data-spy="affix"> 
      <form> 
       <!-- inputs and stuff --> 
      </form> 
     </div> 
    </div> 

    <!-- span9 and its contents --> 

</div> 

ブートストラップが正しく<div>に接辞効果を適用していると私はページを下にスクロールすると、それはまだまま。しかし、ページをモバイルディメンションにリサイズし、レスポンス効果がブートストラップで発生すると（navbar collapsing/objectsがうまく整列している）、添付された<div>はページの他の要素の上にあり、乱雑になります。 .affixにはposition: fixedがありますので、これがうまく説明できます。

私はBootstrapのウェブサイトに行き、ページをモバイルディメンションにリサイズしました。その場合、添付された要素（そのケースでは<ul>）は、他の要素の上を行くことなくその自然な場所をうまく流れます。私はまた、それが起こると、クラスがaffixからaffix-topに変更されていることに気付きました。

フレームワークが明らかに同じように動作しないため、これがカスタマイズかどうか、またはフレームワークの一部であるかどうかはわかりません。誰もこれについて詳しく説明できますか？ <div>で同じ動作をする必要があります。ページがモバイルサイズにリサイズされると、添付された要素は自然な場所に移動します。

編集：私の観察には欠陥があります。私はそのページの要素が最初にaffix-topを持っていて、data-top-offsetの下にスクロールすると、それはaffixに変わることに気付きました。サイズ変更時に私の<div>が<ul>のようにレンダリングされない理由はまだ説明していません。

Answer 1

ブートストラップでは、一部の要素のデフォルトの動作を上書きするextra CSS file for their docsが使用されます。

具体的には、ライン917上で、彼らはstaticに（< 767px幅のためのメディアクエリの一部として）取り付けられ、サイドバーのposition変更：

.bs-docs-sidenav.affix { 
    position: static; 
    width: auto; 
    top: 0; 
} 

彼らが貼らに適用されるいくつかの追加のカスタムスタイルを持っていますサイドバー。電話機サイズのウィンドウでChromeウェブインスペクタ/ Firebugを使用して表示できます。

Answer 2

HTMLスパン3（またはスパン4など）のDIVではなくその子を添付しないでください。私の場合は#sidebarを付けました。また、.affixクラスやdata-offset-top = "XXX"をこのdivに追加する必要はありません。次のJavascriptがこのトリックを行います。

<aside class="span3"> 
    <div id="sidebar"> 
    <p>some content</p> 
    </div> 
    </aside> 

CSS（以下のコードはbootstrap.css上に存在しない、私はhttp://twitter.github.io/bootstrap/assets/css/docs.cssからそれをコピーした）

.affix-bottom { 
    position: absolute; 
    top: auto; 
    bottom: 400px; 
} 

Javacript以下のjsがから#sidebarのクラスを変更します。どのくらいページがスクロールされるかに応じて.affix-bottomに貼り付けます。

$('#sidebar').affix({ 
     offset: { 
     bottom: 450 
     } 
    }); 

実際にはモールの解像度#sidebarは他の要素と重複します。この使用ブートストラップのメディアを解決するにはSaraは、以前に指摘したように、あなたは何かなどを使用することができますhttp://twitter.github.io/bootstrap/scaffolding.html#responsive

を照会...

@media(max-width:767px){ 
    .affix { 
    position: static; 
    width: auto; 
    top: 0; 
    } 
} 

あなたは#sidebar振る舞うを作ること..so。

これが誰かを助けることを願っています！

Answer 3

私は同じ問題を抱えていましたが、私の解決策は、より小さな画面サイズの貼り付け動作を削除することでした。たとえば、1199ピクセル未満のサイズで削除するには：

#map { 

    @media (min-width: 1199px) { 
    &.affix-top { 
    } 

    &.affix { 
     position: fixed; 
     top: 20px; 
     bottom: 100px; 
    } 

    &.affix-bottom { 
    } 
    } 
}