Bootstrap row elements with variable height
I am currently developing a website using Twitter Bootstrap.
My case: One .row element containing multiple variable height .col-XX-XX elements (product images with variable image ratio)
The number of columns in my design ranges from viewport size to viewport size, which turns me off by just splitting elements, creating multiple .row wrappers.
Each element has a variable height, due to the individual element image. Large empty areas (marked in red) with no items may appear if a large item appears as the first one in the actual line that appears.
My only solution is to set a predefined height of the items in the list to make sure that the next item (on a new line) is displayed the next time it doesn't "jump".
I also tried to use javascript, find the maximum value of the elements and then set all the elements to that height, however this is a bad solution, so a lot of variation in the heights of the image will create large empty areas as well.
Does anyone have a good solution to this problem?
source to share
With the help of Joseph Casey, I found a solution.
CSS: flexbox
Using the styles described in this link: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
I used the following styles:
CSS
.row{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row .item{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Achieved that the elements align well.
Styles are supported by the latest browsers. I found the flexbox browser support list here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A small note. In Google Chrome 43, the first row of items moves the last item down to the next row (the last column in the first row is empty), but all subsequent rows fill all columns nicely. I haven't found a solution for this yet.
source to share