Bootstrap ohne Zeilen?

8

Ich liebe Bootstrap, aber ich versuche, etwas völlig außerhalb seiner erwarteten Gitter zu erreichen, die Zellen untereinander gestapelt haben soll ohne gruppierte Linien. So etwas wie Pinterest, wenn du willst.

Bootstrap normales Gitter:

Bootstrap kein Zeilen Konzept:

Vielleicht ist die richtige Antwort "benutze kein Bootstrap", aber nachdem ich viele Seiten damit aufgebaut habe, würde ich es gerne weiter benutzen und einen Weg finden, dies zu umgehen.

Wenn ich tatsächlich ein anderes responsives Framework mit einem Grid-System verwenden würde, das mehr dem entspricht, was ich brauche, was würden Sie empfehlen?

tia

    
ericosg 03.06.2014, 08:55
quelle

5 Antworten

5

Sieht so aus, als müssten Sie JS verwenden, um das Ziel zu erreichen.

Sie können folgende Bibliotheken verwenden:

Jquery Wookmark - Leicht und schnell. In mir selbst verwendet, um ähnliches Problem zu lösen

Isotop - Flexibel und erreichen Sie Funktionen

Mansonry - Beliebte lib, ähnlich wie Isotope

    
Evgeniy 05.06.2014, 08:12
quelle
4

Ich habe an einem ähnlichen Problem für eine verschachtelte Drag'n-Drop-Box-API gearbeitet, mit dem Ziel, mit dem Bootstrap-Grid beim finalen Rendering kompatibel zu sein. Der Builder war kein Bootstrap-Grid, sondern ein hausgemachtes ähnliches Paradigma des Bootstrap-Grids und ich habe es mit der CSS3 favourable flexbox

behoben

werfen Sie einen Blick auf Gelöst von flexbox

Ich habe eine root-Zeile (nur eine für multiline) eingefügt und eine Klasse hinzugefügt, die

implementiert %Vor%

zB:

%Vor%

und das CSS

%Vor%

Dies bewirkt, dass die Höhe aller Kästchen, die sich in derselben Zeile befinden, automatisch an die größere angepasst wird

    
Jo Takion 05.03.2017 11:09
quelle
2

Der Schlüssel zu% ce_de% ist, dass sie von links nach rechts und dann von oben nach unten umgebrochen werden. Wenn Sie also col-(size)-(gridsize) mit einer Rastergröße kleiner als 12 erstellen, beginnt andere col mit dem Umbruch. Sie können sie auch verschachteln, um die Seite aufzuteilen. So ist es möglich, ein "zeilenloses" Layout wie folgt zu erstellen:

(Das ist keine tolle Demo, aber es zeigt, dass das, was Sie wollen, möglich ist) Ссылка

    
serakfalcon 03.06.2014 09:34
quelle
1

Sie könnten versuchen, Spalten und Zeilen im Bootstrap zu invertieren.

%Vor%

Hier ist ein jsfiddle davon.

    
gpantic 03.06.2014 09:13
quelle
0

Sie können Zeile in Spalte und dann aber neue Spalten in diesen Zeilen verwenden Wenn Sie Probleme mit der Polsterung haben, machen Sie Ihre Klassen no-padding / no-left-padding / no-right-padding

%Vor%     
Mezzdeen 03.06.2014 09:36
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Integrierender Fehler: maximale Anzahl der Unterteilungen erreicht