Optimieren von .container mit .Container-Fluid basierend auf der Bildschirmgröße

Question

Hier ist eine Herausforderung für Bootstrap-Assistenten: Wie kann ich mein Layout je nach Bildschirmgröße zwischen .container und .container-fluid wechseln lassen. I.e. Auf dem Handy möchte ich Flüssigkeit, ansonsten den normalen Behälter benutzen.

<!-- pseudo class definition to exemplify --> 
 
<div class="container-fluid-xs-only container-sm-and-up"> 
 
    
 
    <div class="row"> 
 
    ... 
 
    </div> 
 
</div>

Haftungsausschluss: die Abhilfe, die ich bin in diesem Augenblick tun, ist zwicken die Ränder Medienabfrage verwenden. I.e. Verwenden von .container und Hinzufügen negativer Margen auf Mobilgeräten. Ich frage mich, ob es einen besseren Weg gibt, dies zu erreichen.

Anforderungen: Im Idealfall möchte ich eine rein CSS-basierte Lösung, wenn wirklich nicht möglich, bitte beachten Sie, dass ich Winkel 1.x.

PS: Ich will nicht, was nach innen "Zeile" duplizieren, mit anderen Worten, ich bin .visible-xs und .hidden-xs mit Duplicate Content dabei ...

Dank nicht interessiert!

Answer 1

Der einzige Unterschied zwischen container und container-fluid ist die Breite, so dass die untergeordneten Elemente (Zeilen, Spalten usw.) sich in beiden gleich verhalten.

Die container wird mit voller Breite (100%) auf xs Bildschirme standardmäßig so am Bildschirm weniger als 768. Breiten, die containercontainer-fluid und verhalten sich genau das gleiche. Sie sollten keine Änderungen vornehmen müssen, und Sie können einfach container verwenden.

http://codeply.com/go/8ei2hMKBKd