Wie mehrere Elemente mit Bootstrap-Grid-System und React Js anzuzeigen

Question

Ich habe den folgenden Code, der eine Liste der Repositorys eines Benutzers auf GitHub erhalten soll und sie mit Bootstrap-Grid-System anzuzeigen.
Die Absicht ist, 3 Repos pro Zeile anzuzeigen, aber ich kann nicht herausfinden, wie das Zeilen-Div nach jeweils 3 Repos zu schließen, aber derzeit werden alle von ihnen in einer Zeile platziert, die die Reihenfolge überläuft und verzerrt.
Der Code, den ich derzeit habe, ist im JSBIN-Link unten.
http://jsbin.com/macifezapi/edit?html,js,output
Vielen Dank im Voraus für jede Hilfe

Answer 1

Twitters Bootstrap Grid-System viele Klassen, die Ihre Anforderungen wie ‚col-lg passen - ** col -md - ** col-sm - ** col-xs - ** '. Werfen Sie einen Blick auf diese:

http://getbootstrap.com/css/#grid

Um sicherzustellen, dass Elemente in identische Zeilen und Spalten stapeln, weisen eine Klasse mit einer festen Höhe auf alle Elemente:

http://jsbin.com/xipijo/edit?html,css,js

Bedenken Sie auch mit eine Vorlage, um Ihre GitHub Repositories zu machen html:

http://handlebarsjs.com/

Answer 2

einfach die Elemente in col-md-4 setzen. Das Boostrap-Gitter hat 12 Reihen. Wenn Sie also jedem Element eine Breite von 4/12 geben, erhalten Sie 3 Elemente pro Reihe.

JS bin: http://jsbin.com/macifezapi/1/edit?html,js,output

Je nachdem, welche Breite Sie wollen die Zeilen in ein mobiles Layout zu brechen (jede Spalte unter 100% Breite) Sie col-lg-4, col-md-4, col-sm-4 oder col-xs-4 verwenden können. Für weitere Informationen siehe Boostrap grid system. Es besteht keine Notwendigkeit, 3 Zeilen manuell zu berechnen und einen Zeilenwrapper um sie zu legen!

Update:

Becuase die Spalten haben unterschiedliche Höhen, verursacht das Gittersystem die verschiedenen columsn verschiedenen anounts von Elementen zu haben. Das sieht überhaupt nicht gut aus. Am einfachsten ist es, jedem Element eine Standardhöhe hinzuzufügen, damit das Rastersystem wieder korrekt funktioniert.

Eine andere Lösung, wenn nur moderne borwser unterstützt werden müssen, ist die neue Flexbox-Technik. Hier

ein Beispiel: http://jsbin.com/muzepubupu/edit?html,css,js,output

Eine gute Beschreibung, wie Flexbox Arbeiten finden Sie hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/