html - 带有文本的 Bootstrap 行故障

Question

正如您从所附示例中看到的那样，如果第一列的文本多于其右侧的文本，则会导致故障。请参阅随附的屏幕截图。

如何在 Bootstrap 中解决这个问题？

演示: 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 1

这个问题是 Bootstrap 将 float 应用到 col-* 类 - 这意味着您的 div 没有正确显示 - 而不是将不必要的 div 添加到标记中只是为了清除 float - 解决了这个问题。

此代码将遍历每个 div，确定其高度，如果它大于最大高度，将调整最大高度。然后它将最大高度应用于所有 div，问题将得到解决。

请注意，我已经为此添加了一个调整大小的功能，并添加了一个控制台 .log 来演示最大高度，但是 snipp 编辑器的变幻莫测不允许在最佳环境中看到它的实际效果 - 尝试将其复制到您自己的页面并在野外尝试。它确实有效。

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>