如何使用bootstrap网格系统和React Js显示多个元素

Question

我有以下代码，用于获取GitHub上用户的存储库列表，并使用Bootstrap的网格系统显示它们。
目的是每行显示3个回购，但我不知道如何在每3个回购后关闭行div，但目前所有这些都被放在一行中，这会溢出并扭曲订单。
我目前的代码在下面的Jsbin链接中 http://jsbin.com/macifezapi/edit?html,js,output
在此先感谢您的任何帮助

Answer 1

Twitter的Bootstrap网格系统有许多适合您要求的类，如'col-lg - ** col-md - ** col-sm - ** col-xs - **'。看看这个：

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

要确保元素堆叠成相同的行和列，请为所有元素指定一个具有固定高度的类：

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

另外，请考虑使用模板将GitHub存储库呈现为html：

http://handlebarsjs.com/

Answer 2

只需将元素放入col-md-4即可。 boostrap网格有12行，所以通过给每个元素增加4/12的宽度，每行最终得到3个元素。

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

根据您要将行划分为移动布局的行宽度（每列占100％宽度），您可以使用col-lg-4，col-md-4，col-sm-4或{{1 }}。有关更多信息，请参阅Boostrap grid system。不需要手动计算3行，并在它们周围放置一个行包装器！

<强>更新

由于列具有不同的高度，网格系统会导致不同的columsn具有不同的项目。这看起来并不好。最简单的解决方案是为每个项目添加默认高度，这样网格系统再次正确工作。

如果只支持现代版本的borwser，另一种解决方案是使用新的flexbox技术。

以下是一个示例：http://jsbin.com/muzepubupu/edit?html,css,js,output

可以在此处找到有关Flexbox如何工作的详细说明：https://css-tricks.com/snippets/css/a-guide-to-flexbox/