Bootstrap-Affix verwenden, während reaktionsfähiges Spaltenlayout beibehalten wird

Question

Please see this fiddle. Ich habe ein Hauptinhaltsdiv und eine Seitenleiste, die ich an den oberen Rand der Seite angehängt werden soll, während der Benutzer scrollt. Alles funktioniert gut, außer wenn es in Mobile betrachtet wird:

Ohne die Affix-Sachen verhalten sich die Spalten wie Bootstrap-Spalten sollten und die Seitenleiste direkt unter dem Haupt-Div. Aber mit Affix verschwindet das div einfach.

Ich habe irgendwie fixiert dies eine Medien Abfrage:

//Override affix on small screens: 
@media (max-width: 750px) { 
    .affix { 
     position: static; 
    } 
} 

Damit liegt der div, wo es auf kleinen Bildschirmen sein sollte, und kehrt zum Affix-Layout auf Desktops. Es gibt jedoch eine Leere in der Mitte, wo sie einfach verschwindet. Wenn Sie das Fenster in die Mitte ziehen, verschwindet es, und dann werden die Bereiche in der richtigen Position wiederholt, während das Fenster noch kleiner gezogen wird. Ich habe versucht, den 750px Wert zu justieren, aber war nicht in der Lage, mit einer Zahl zu kommen, die wirklich funktioniert.

Wie kann ich das Rasterlayout und den Affix-Schalter ein- und ausschalten? Woher weiß ich, wo der Breakpoint sein wird - sollte ich die Verwendung einer bestimmten Anzahl von PX vermeiden und einen anderen Ansatz für dieses Problem wählen?

Mein aktuelles Bootstrap-Layout ist (ich hinzugefügt habe die height:500px so können Sie das Scroll-Verhalten in JS Fiddle sehen - es ist in meinem eigentlichen Code nicht vorhanden ist):

<div class="container-fluid"> 
    <div class="row" id="content"> 

    <div class="col-md-8" style="height:500px"> 
     Main content 
    </div> 

    <div class="col-md-4"> 
     <div class="affix" data-spy="affix" data-offset-top="0"> 
     Side content 
     </div> 
    </div> 

    </div> 
</div> 

Vielen Dank

Answer 1

Ich bin nicht klar, wo Sie möchten, dass der Affix auf dem Handy ist, entweder rechts neben dem Inhalt oder darunter, aber ich werde versuchen zu helfen:

In Ihrer Fiddle sehe ich keinen Punkt, wo Der Affix verschwindet vorübergehend, aber ich sehe, dass er wie erwartet reagiert mit den Grid-System-Klassen. Dh: die col-md- * divs erweitern sich bei 992px auf 100% Breite.

Der Medienabfrage-Haltepunkt für col-md- * ist 992px. (Es sei denn, Sie haben es in Ihrer Kopie von Bootstrap zurückgesetzt.)

Wenn Sie das gleiche Breitenverhältnis wie auf dem Desktop beibehalten möchten, würde ich vorschlagen, Ihre Klassen von .col-md- * zu .col zu tauschen -xs- * So wird .col-md-8 zu .col-xs-8 und .col-md-4 wird zu .col-xs-4 - aber dann wäre dein Hauptinhalt auf Mobilgeräten ziemlich eng.

Sind Sie nicht sicher, ob Sie das wollen?