Vertikale Lücke zwischen Bootstrap-Spalten
Ich versuche ein Layout in Bootstrap zu erstellen, das drei Blöcke auf einem größeren Bildschirm und zwei Blöcke auf einem kleineren Bildschirm zeigt (der Haltepunkt liegt zwischen sm und md ) ).
Siehe CodePen-Beispiel
Dies führt jedoch zu einer unerwünschten vertikalen Lücke zwischen Block A und C.
Wie ich sehe, habe ich ein paar Optionen, um die vertikale Lücke zu entfernen, aber vielleicht gibt es eine bessere Lösung:
- Dupliziere den HTML-Code und verwende visible-sm und visible-md , um das gewünschte Layout anzuzeigen. Auf sm würde es ein zweispaltiges Layout haben mit der ersten Spalte, die sowohl A als auch C enthält.
- Nachteil: Der Blockinhalt muss auch dupliziert werden, was sehr viel HTML enthalten kann
- Verwenden Sie JavaScript, um den Block in die richtige Spalte zu verschieben (möglicherweise jQuery Masonry).
- Nachteil: Ich hätte lieber eine CSS-Lösung
- Schauen Sie sich Flexbox, CSS-Spalten und CSS-Gitter an.
- Nachteil: Browserunterstützung gibt es nicht
4 Antworten
Imperfekt ungeprüfte Lösung bei Ссылка . Schlüsselpunkte:
- Bei kleinen Breiten
- break out of flow
- mache den Container kleiner
HTML
%Vor%CSS-Fragment
%Vor%Der Abstand ist nicht perfekt, sondern gibt Ihnen einen Ausgangspunkt für Ihre Experimente.
Hinweis: Dies kann mit FlexBox und Grid (wenn es fertig ist) viel einfacher - und die neueste Alpha-Version von Bootstrap unterstützt flexbox.
Ich nehme an, Sie haben gesagt, Sie würden eine CSS-Lösung bevorzugen, aber meiner Meinung nach ist es nicht das, was die Bootstrap-Entwickler bei der Entwicklung ihres Grid-Systems im Auge hatten. Ich würde Javascript verwenden, um diesen Saugnapf dort zu halten, wo Sie ihn brauchen:
Ich habe Ihre Spalten zu Containern (ich nannte sie Buckets)
geändertHTML
%Vor%Dann "lieh" ich mir einen Ansatz, um Medienanfragen über den Link im Kommentar unten zu sehen
JS
%Vor%Und einige Regeln für das versteckte div hinzugefügt (das ich benutze, um die Bildschirmbreite zu sehen) CSS
%Vor%ps. Es ist gut zu sehen, wie Leute mit handgezeichneten Doodles ihre Ideen vermitteln, so wie ich es gerne auch für Leute teile: D
Ich habe einen cleveren Weg gefunden, dies zu tun. Ordnen Sie die Reihenfolge neu an. Setzen Sie C vor B und dann drücken und ziehen Sie die Reihenfolge
%Vor%
Tags und Links css css3 responsive-design twitter-bootstrap positioning