Cách hiển thị nhiều phần tử sử dụng hệ thống lưới bootstrap và React Js

Question

Tôi có mã sau đây, để lấy danh sách các kho lưu trữ của người dùng trên GitHub và hiển thị chúng bằng cách sử dụng Hệ thống lưới của Bootstrap.
Mục đích là để hiển thị 3 repos mỗi hàng, nhưng tôi không thể tìm ra cách đóng div hàng sau mỗi 3 repos, nhưng hiện tại tất cả chúng được đặt trong một hàng, làm tràn và bóp méo thứ tự.
Mã tôi hiện có nằm trong liên kết Jsbin bên dưới.
http://jsbin.com/macifezapi/edit?html,js,output
Cảm ơn trước sự giúp đỡ nào

Answer 1

Bootstrap Grid System của Twitter có nhiều lớp học phù hợp với yêu cầu của bạn như 'col-lg - ** col -md - ** col-sm - ** col-xs - ** '. Hãy xem này:

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

Để đảm bảo rằng các yếu tố ngăn xếp thành hàng và cột giống hệt nhau, gán một lớp học với chiều cao cố định cho tất cả các yếu tố:

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

Ngoài ra, xem xét sử dụng một mẫu để hiển thị các kho lưu trữ GitHub của bạn thành html:

http://handlebarsjs.com/

Answer 2

Chỉ cần đặt các yếu tố trong col-md-4. Lưới boostrap, có 12 hàng, do đó, bằng cách cho mỗi phần tử có chiều rộng là 4/12, bạn kết thúc với 3 phần tử mỗi hàng.

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

Tùy thuộc vào chiều rộng bạn muốn các hàng để đột nhập vào một bố trí di động (mỗi cột tham gia 100% chiều rộng), bạn có thể sử dụng col-lg-4, col-md-4, col-sm-4 hoặc col-xs-4. Để biết thêm thông tin, hãy xem Boostrap grid system. Không cần phải tự tính toán 3 hàng, và đặt một wrapper hàng xung quanh họ!

Cập nhật:

bởi vì các cột có độ cao khác nhau, hệ thống lưới điện gây ra columsn khác nhau để có anounts khác nhau của các mặt hàng. Điều này không có vẻ tốt chút nào. Giải pháp dễ nhất là thêm chiều cao mặc định cho từng mục, theo cách đó, hệ thống lưới sẽ hoạt động chính xác trở lại.

Một giải pháp khác, nếu chỉ có borwser hiện đại phải được hỗ trợ, là sử dụng kỹ thuật flexbox mới.

Dưới đây là một ví dụ: http://jsbin.com/muzepubupu/edit?html,css,js,output

Một mô tả tốt cách thức hoạt động flexbox có thể được tìm thấy ở đây: https://css-tricks.com/snippets/css/a-guide-to-flexbox/