1
How do I organize many Divs col-xx-3 different heights?
Is there any class or other method without using Row (every 4 products)?
Some way no need to change Select or PHP?
I tried several ways but I could not. I tried to change Select already, and PHP too, but I always fell into some much bigger problem.
Remembering that I don’t have much practice. I’m open to any idea!
I thank you all!
(some things in the layout will still change, the image is only of demonstration)
2
Well, on the margin between the div’s, just change the CSS on your page, changing the margin.
.col-md-3{
margin: 0 5px 5px 0;
}
Regarding the size, I believe you do not know the size of each text to define the min-heigth of the page, then I advise using jQuery to get the biggest size of each div and set the heigth equal for all.
It would look something like this:
$(document).ready(function() {
var maxHeight = -1;
$('.col-md-3').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.col-md-3').each(function() {
$(this).height(maxHeight);
});
});
See an example on Jsfiddle.
References: Use jQuery/CSS to find the tallest of all Elements.
If you want to change the size by blocks, you can separate the value from the maxHeigth in each block, this way:
$(document).ready(function() {
var maxHeight = -1;
$('.row').each(function() {
$(this).find('.col-md-3').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$(this).find('.col-md-3').each(function() {
$(this).height(maxHeight);
});
});
});
Functional example in Jsfiddle.
Just remember, bootstrap helps a lot in development, but it doesn’t solve all our problems. What you want would be better if you made it yourself CSS according to your need, where you would have blocks for each size, and in creating the product you would need. This would give a better organization on your screen, the way you want.
Yes, bootstrap is very good, but I always end up changing a lot, in addition to creating an extensive CSS to suit what I need. I understood your idea, but there is a case that the largest col-xx-3 is very large, and ends up disfiguring all the rest of the page with very large spaces, would have to adjust it?
But in case what do you want done about it? You said you would have no problem leaving a space at the end. You want me to cut or what?
The real question is that the larger space was not only under the 'neighbors' of the larger, but of all, and it turns out that lines, with 1 product or small heights have very large spaces, you know? I will have to see how exactly this organization would look, if it were possible to add the higher height of each line would be ideal, I imagine, but I don’t know for sure and nor run.
@Lucas In this case you can do by blocks, instead of doing at all.
@Lucas I edited the answer. It’s not pretty, but I’m running out of time to do it right now. But this way it will work the way you need it.
Although it is not quite right, I will apply the first way you presented, as I had few exceptions, it is preferable to change the information in what to change much of the code. (I am still analyzing the second way). Thank you so much for your help, time and patience!
1
You can set a maximum fixed height for the elements, in your case ai, the items are clustering because it has some with height larger than the other. If you put the height of class="col-Sm-3" in this case ai in 200px for example by default, it will solve the problem!
I tried to do it this way. This way some Ivs overlap the others below, and there are still some blanks (as in the image)
Are you online? You can pass the link to take a look??
I put online here, is as example 300px, but if you inspect and change will see better: link
For my here appeared normal, everything straight, no spaces in white.
I made some corrections and fixed a medium size, but I will have to change some records and limit the size of the texts to not have much variation
1
You can make a PHP, creating a sum before listing each list, if the sum is = 4 which is the amount of Li per line, plays a div clearfix and Zera the sum to perform again, another tip is to use the Mansory, have you heard? follow some links, it adjusts the Li: http://masonry.desandro.com/ http://isotope.metafizzy.co/layout-modes/masonry.html
If you want to follow the example in php, throw the code in the plunker that I help you!
I tried to use 'clearfix' on the Divs but it made no difference, all the Thumb are already in class="box clearfix". I like the idea of masony, I will try to use here and if you have any doubts I will comment here :)
1
The best way is with the class "Row"
Yes, but in the case of the Row class I would have to change a lot in PHP, and it’s already starting to complicate a lot more. But if I don’t find a solution I’ll have to find a way to use Row.
Browser other questions tagged html twitter-bootstrap div
You are not signed in. Login or sign up in order to post.
I don’t quite understand how you want this organization. I could explain better?
– Randrade
I’m sorry for the confusion, but you can see in the image that the Divs are disorganized, I wanted something aligned higher, without this blank space on the left side (for example). @Randrade
– Lucas
So, there are sites that seek this "disorganization" of sizes as a layout requirement. In your case, do you want it to stick to each other and to a fixed size? And the text, has trouble cutting or will add a blank space in those that do not have enough text?
– Randrade
Yes, I have seen these 'disorganized' layouts, but in this case, I imagine, it is better to maintain a more severe organization, (due to the target audience and other issues). Thus, I planned to keep the images and titles aligned, and if there were spaces below between one product and another would be better than product spaces "missing" as is happening. @Randrade
– Lucas