Bootstrap gaps between columns
See: http://www.anniestasjes.nl/40/producten.html?category=tassen I use bootstrap 3 for responsive layout. I get these huge gaps between products because sometimes the produ
-
Your main problem is that you are not using the grid system correctly.
Your issue is that you have one
div.rowthat you then are placing ALL of your products in. Generally, one.rowshould only have a maximum of 12 columns in it per size. You can go more than that, but only if you ensure that the total for any particular size is a factor of 12, or you will end up with dangling boxes. And as stated at the beginning, 33 in one.rowis definitely not the correct approach.This is in addition to the following:
.row-fluiddoes not exist any more in Bootstrap 3. It is now just.row.- You shouldn't be wrapping the columns in
tags. If you are going to do that, wrap the contents of the columns instead. - Once a column is in a row, it is going to need to stay in that row. Changing the columns via
.col-[SIZE]-[N]should be for changing the width of that particular container, not adding more containers to a row. In other words, going from two products per row to three to four is just not going to happen. - You do not need to declare
.col-lg-4if you have already declared.col-md-4. Bootstrap's grid system cascades up, meaning the last declared size applies to all larger sizes.
I would suggest you spend some time going back and familiarizing yourself with how Bootstrap's grid system works via the docs or any number of helpful answers to questions here on SO.
All that being said, there is a way for you to go from two products per row to four with a bit of nesting. See http://www.bootply.com/rymvydjpDn for a basic working example, and code is below:
CONTENT...CONTENT...CONTENT...CONTENT...A different way to approach the solution above, without all the nesting: http://www.bootply.com/fB84B9ovrF
CONTENT...CONTENT...CONTENT...CONTENT...
加载中...
- 热议问题