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

How to display multiple elements using bootstrap grid system and React Js

本文关键字：显示 Js 元素 React 何使用 bootstrap 网格 系统      更新时间：2023-09-26

我有以下代码，旨在获得GitHub上用户存储库的列表，并使用Bootstrap的网格系统显示它们
目的是每行显示3个repos，但我不知道如何在每3个repo之后关闭行div，但目前所有的repos都放在一行中，这会溢出并扭曲顺序
我目前拥有的代码在下面的Jsbin链接中
http://jsbin.com/macifezapi/edit?html，js，输出
提前感谢的任何帮助

Twitter的Bootstrap网格系统有许多类符合您的需求，如"col-lg-**col-md-**col-sm-**colxs-**"。看看这个：

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

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

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

此外，考虑使用模板将GitHub存储库呈现为html:

http://handlebarsjs.com/

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

JS bin：http://jsbin.com/macifezapi/1/edit?html，js，输出

根据要将行拆分为移动布局的宽度（每列占用100%宽度），可以使用col-lg-4、col-md-4、col-sm-4或col-xs-4。有关更多信息，请参阅Boostrap网格系统。不需要手动计算3行，并在它们周围放置行包装器！

更新：

由于柱子的高度不同，网格系统会导致不同的柱子有不同的物品数量。这看起来一点都不好。最简单的解决方案是为每个项目添加一个默认高度，这样网格系统就能再次正常工作。

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

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

关于flexbox的工作原理，可以在这里找到一个很好的描述：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关文章：