Ich teste Twitter Bootstrap und habe mich mit Grundgerüsten mit Reihen festgefahren. Ich habe die Dokumentation mehrmals überprüft und sehe Verschachtelungsspalten, in denen Sie Spalten innerhalb einer Spalte grundsätzlich verschachteln können, aber ich kann die Möglichkeit, Zeilen zu einer zu kombinieren und sie an der Spalte neben den nicht kombinierten Zeilen auszurichten, nicht finden.
Das folgende Bild sollte veranschaulichen, was ich erreichen möchte.
Die einzige Problemumgehungslösung, auf die ich gestoßen bin, ist die Verwendung von Tabellen, aber diese Idee gefällt mir nicht, da ich der Ansicht bin, dass die Reaktionsfähigkeit bei der Verwendung von Tabellen nicht funktioniert.
Hat jemand eine elegante Lösung dafür? Das meiste Weblayout, das ich mache, erfordert ein hohes Maß an Flexibilität, daher wäre es großartig, wenn ich hier etwas Nützliches aufgreifen könnte.
quelle
1row=25px
,2row=50px
. Kannst du das überspannte Div so hoch wie die gesamte Reihe machen? versuchte hinzuzufügen,.row{height:100%;}
aber es ging nicht.Sie sollten die Bootstrap-Spaltenverschachtelung verwenden.
Siehe Bootstrap 3 oder Bootstrap 4 :
http://jsfiddle.net/DRanJ/125/
(Vergrößern Sie im Geigenbildschirm Ihren Testbildschirm, um das Ergebnis anzuzeigen, da ich Spalte - * verwende und dann Spalten mit reaktionsfähigen Stapeln verwende.)
Hinweis : Ich bin nicht sicher, ob BS2 das Verschachteln von Spalten zulässt , aber in der Antwort von Paul Keister wird das Verschachteln von Spalten nicht verwendet. Sie sollten es verwenden und vermeiden, CSS neu zu erfinden, während Bootstrap gut funktioniert.
Die Spaltenhöhe ist automatisch. Wenn Sie eine zweite Zeile hinzufügen (wie in meinem Beispiel), passt sich die Spaltenhöhe an.
quelle
-md-
Antwortregel. Sie müssen Ihren Bildschirm vergrößern, um das erwartete Ergebnis zu sehen. Wenn Ihre Bereiche auf kleineren Bildschirmen als Spalten angezeigt werden sollen, ersetzen Sie sie-md-
durch-sm-
oder-xs-
. Dies ist eine Haltepunktfrage (siehe bootstrapdocs.com/v3.0.3/docs/css/#grid ).Hinweis: Dies war für Bootstrap 2 (relevant, als die Frage gestellt wurde).
Sie können dies erreichen, indem Sie
row-fluid
eine flüssigkeitsbasierte (prozentuale) Zeile in einer vorhandenen Zeile erstellenblock
.Hier ist ein JSFiddle-Beispiel .
Ich habe bemerkt, dass es einen merkwürdigen linken Rand gibt, der für die Bereiche innerhalb des
row-fluid
nach dem ersten erscheint (oder nicht erscheint) . Dies kann mit einer kleinen CSS-Optimierung behoben werden (es ist dasselbe CSS, das auf das erste Kind angewendet wird und auf diejenigen nach dem ersten Kind erweitert wird):quelle
row-fluid
Sie nicht, wann es Zeit ist, die inneren Reihen zu unterteilen.Überprüfen Sie dieses. hoffe es wird voll für dich helfen.
http://jsfiddle.net/j6amM/
quelle
Pauls Antwort scheint den Zweck des Bootstraps zu vereiteln; das, auf das Ansichtsfenster / die Bildschirmgröße zu reagieren.
Durch das Verschachteln von Zeilen und Spalten können Sie das gleiche Ergebnis erzielen und gleichzeitig die Reaktionsfähigkeit beibehalten.
Hier finden Sie eine aktuelle Antwort auf dieses Problem.
Sie können den Codepen hier anzeigen.
quelle
quelle