michaelmcgurk michaelmcgurk - 3 months ago 12
CSS Question

Bootstrap row glitch with text

As you can see from the attached example, if the first column has more text than the one to it's right, then it causes a glitch. See the screenshot attached.

How do I resolve this in Bootstrap?

enter image description here

Demo:
https://jsfiddle.net/oLderkuo/



/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">

<div class="portfolio-gallery row">

<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
<span class='sub-gallery-icon'>
<a href='#' >
<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
</a>
</span>
<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit.
</span>
</div>

<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
<span class='sub-gallery-icon'>
<a href='#' >
<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
</a>
</span>
<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</div>

<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
<span class='sub-gallery-icon'>
<a href='#' >
<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
</a>
</span>
<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit.
</span>
</div>

</div>




Answer

This issue is that Bootstrap applies a float to the col-* classes - meaning that your divs are not displaying correctly - rather than adding unnecessary divs to the markup just to clear the float - solve the problem.

This code will iterate through each of the divs , determine its height and if it is great than the max-height will adjust the max height. Then it will apply the max height to all the divs and the problem will be resolved.

Note that I have added a resize function to this, and aconsole .log to demonstrate the max height, but the vagaries of the snipp editor do not allow the best environment to see this in action - try copying it out to your own page and try it in the wild. It really does work.

adjustHeight();
$( window ).resize(function() {
   adjustHeight();
});



function adjustHeight(){
    var maxHeight=0;
    $('.gallery-item').each(function(){
    var height=$(this).height();
    if(height> maxHeight){maxHeight=height};
      console.log(maxHeight);
    });

    $('.gallery-item').css('height',maxHeight+'px');
  }
/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
    <div class="portfolio-gallery row">

		<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
			<span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
			<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
			</span>
		</div>

		<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
			<span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
			<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			</span>
		</div>

		<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
			<span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
			<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
			</span>
		</div>
    
</div>