文本

Question

从附带的示例中可以看出，如果第一列的文本多于右侧的文本，则会导致故障。请参阅随附的屏幕截图。

如何在Bootstrap中解决此问题？

演示：  https://jsfiddle.net/oLderkuo/

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我通过https://github.com/twbs/bootstrap/issues/9454

找到了解决方案

我在这里更新了我的小提琴：https://jsfiddle.net/oLderkuo/3/

基本上在每个第二个gallery item div之后我必须添加以下内容：

<div class="clearfix visible-xs"></div>
<div class="clearfix visible-sm"></div>

Answer 2

这个问题是Bootstrap将一个浮点数应用于col- *类 - 这意味着你的div没有正确显示 - 而不是为了清除浮点而向标记添加不必要的div - 解决问题。

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

请注意，我已经为此添加了resize函数，并且aconsole .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>