如何使用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或col-xs-4 。 有关更多信息，请参阅Boostrap网格系统 。 无需手动计算3行，并在它们周围放置行包装器！

更新：

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

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

这是一个例子： http ： //jsbin.com/muzepubupu/edit？html，css，js，output

有关Flexbox如何工作的详细说明，请访问： https ：//css-tricks.com/snippets/css/a-guide-to-flexbox/