Bootstrap - Zeile nur auf kleinem Gerät
Für meine Planseite verwende ich Panels, die den Inhalt jedes Plans enthalten.
Das Problem, das ich habe, ist, weil jedes Panel eine andere Größe hat, wenn man es auf dem Handy anschaut sieht es so aus:
Ich möchte, dass es so aussieht:
Aber wenn ich es so mache, sieht es auf großen Bildschirmen so aus:
Wie kann ich 2 kleine Bildschirme und 4 große Bildschirme erreichen, ohne meinen Code wiederholen zu müssen und für die Zeilen hidden- * und visible- * zu verwenden?
Hier ist ein Bootply dieser Seite: Ссылка
3 Antworten
Hier geht's:
Ich habe es geschafft, indem ich die linken zwei div -Elemente und die rechten zwei div -Elemente in ihren eigenen entsprechenden Containern aufgeteilt habe. Dann habe ich eine Kombination aus col-lg , col-md und col-sm verwendet, um den gewünschten Effekt zu erzielen:
%Vor%
Das ist eine etwas alte Frage, und sie hat bereits eine akzeptierte Antwort; Ich wollte ein bisschen flüssigeres Design (und mein Anwendungsfall passt nicht wirklich zu deinem), also kam ich auf eine andere Lösung, wollte sie hier für die Nachwelt aufzeichnen.
Bootstrap-Spalten basieren auf float: left , weshalb Sie das seltsame Layout erhalten, wenn die Spalten umbrechen und die linke Spalte größer als die rechte ist. In diesem Fall versucht der Browser, ihn soweit wie möglich zu verschieben, bevor er in die nächste Zeile verschoben wird.
Sie wollten Ihre Spalten nicht kopieren und sichtbare / versteckte Klassen verwenden. Es gibt jedoch eine andere Option, die sichtbare / versteckte Klassen verwendet, die die Tatsache nutzen, dass diese unverankerte Container sind. CSS hat die Eigenschaft clear , um zu erzwingen, dass ein Container unter alle Floating-Container verschoben wird (der Wert left verschiebt ihn unter alle linken Floating-Werte, right unter alle Floating-Werte und both unter alle Floating-Werte, links oder rechts) . Sie können also Folgendes zwischen Ihre Spaltenpaare einfügen:
Sie erhalten den gleichen Effekt, aber mit weniger Komplexität, obwohl vielleicht nicht der koscheste Bootstrap-Weg.
Tags und Links twitter-bootstrap