ブートストラップグリッドシステムとReact Jを使用して複数の要素を表示する方法

Question

次のコードはGitHub上のユーザーのリポジトリのリストを取得し、ブートストラップのグリッドシステムを使用して表示することを目的としています。
1行に3 reposを表示することを意図していますが、3 reposごとに行divを閉じる方法はわかりませんが、現在はすべて1行に配置されています。
私が現在持っているコードは、以下のJsbinリンクにあります。任意のヘルプ

Answer 1

Twitterのブートストラップグリッドシステムは、「COL-LGのようなあなたの要件に合う多くのクラスがある - ** COLを-md - ** col-sm - ** col - xs - ** '。また、使用することを検討して

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

を：、要素は、同一の行と列にスタックしていることを確認し、すべての要素に固定の高さを持つクラスを割り当てるには

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

：これを見てくださいHTMLにあなたのGitHubのリポジトリをレンダリングするためのテンプレート：

http://handlebarsjs.com/

Answer 2

を事前に
http://jsbin.com/macifezapi/edit?html,js,output
おかげでジャストcol-md-4の要素を入れました。ブーストラップグリッドには12行があるので、各要素に4/12の幅を与えることで、行ごとに3つの要素になります。

JSビン：http://jsbin.com/macifezapi/1/edit?html,js,output

によってはその上の行は、あなたがcol-lg-4、col-md-4、col-sm-4またはcol-xs-4使用することができ、モバイルレイアウト（各列は100％の幅を取る）に侵入することにしたい幅。詳細はBoostrap grid systemを参照してください。手作業で3行を計算する必要はなく、行のラッパーを置く必要はありません！

更新：列は高さが異なるBecuase

、グリッドシステムは、アイテムの異なるanountsを持っているために、異なるcolumsnの原因となります。最も良い解決策は、各アイテムにデフォルトの高さを追加することです。グリッドシステムが再び正しく修正されます。

現代のボルワーサーだけをサポートしなければならない別の解決策は、新しいフレックスボックス技術を使用することです。ここで

例です。http://jsbin.com/muzepubupu/edit?html,css,js,output

フレキシボックスの作品はここで見つけることができますどのように良い説明：https://css-tricks.com/snippets/css/a-guide-to-flexbox/