5

I have the following code, which is intended to get a list of a user's repositories on GitHub and display them using Bootstrap's Grid System.
The intention is to display 3 repos per row, but I cannot figure out how to close the row div after every 3 repos, but currently all of them are being placed in one row, which overflows and distorts the order.
The code I currently have is in the Jsbin link below.
http://jsbin.com/macifezapi/edit?html,js,output
Thanks in advance for any help

Improve this question
2
  • Can you write a demo using jsbin?Like this one Commented Jan 3, 2016 at 15:06
  • @梁少峰 Updated with the JS bin link Commented Jan 3, 2016 at 15:21

2 Answers 2

Reset to default
2

Twitter's Bootstrap Grid System has many classes that fit your requirements like 'col-lg-** col-md-** col-sm-** col-xs-**'. Take a look at this:

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

To ensure that elements stack into identical rows and columns, assign a class with a fixed height to all elements:

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

Also, consider using a template to render your GitHub repositories to html:

http://handlebarsjs.com/

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The problem is that the grid does not stack correctly after adding the bootstrap grid classes. See the updated bin at jsbin.com/macifezapi/1/edit?html,js,output specifically the second row of the fullscreen version to see what I mean
By "stack correctly" do you mean that you'd like the grid elements to have equal heights? Try assigning a CSS class with a specified height attribute to the elements in your script.
What I mean is that in the second row, there should be 3 elements but there are only 2 and in the third row there's only one element. The columns don't have an equal number of elements
Add the class with a consistent height to all of the new html elements:jsbin.com/xipijo/edit?html,css,js
Worked perfectly. Thanks @Is Angieri
1

Just put the elements in col-md-4. The boostrap grid, has 12 rows, so by giving each element a width of 4/12, you end up with 3 elements per row.

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

Depending on which width you want to the rows to break into a mobile layout (each column taking 100% width) you can use col-lg-4, col-md-4, col-sm-4 or col-xs-4. For more information see Boostrap grid system. There is no need for manually calculation 3 rows, and putting an row wrapper around them!

Update:

Becuase the columns have different heights, the grid system causes the different columsn to have different anounts of items. This doesn't look good at all.Easiest solution is to add a default height to each item, that way the grid system workds correct again.

Another solution, if only modern borwser have to be supported, is to use the new flexbox technique.

Here is an example: http://jsbin.com/muzepubupu/edit?html,css,js,output

A good description how flexbox works can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Improve this answer

3 Comments

I've updated the JS Bin with my own repo to demo how the grid does not stack correctly even after adding the bootsrap grid classes. See the updated bin at jsbin.com/macifezapi/1/edit?html,js,output specifically the fullscreen version
I see, so your problem is that there are 2 elments in the first column, 3 in the second and 4 in the 3... can you give the elments a fixed height. Currently there is no good solution to this, which works for mobile, you either stick with a table, or you use the html5 flexbox (depending which bowsers you must support). I'll make another demo using flexbox
Adding the fixed height to each element worked well for me. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.