帶文本的自舉行故障

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

 
\t \t <div class='gallery-item col-md-4 col-sm-6 col-xs-12'> 
 
\t \t \t <span class='sub-gallery-icon'> 
 
\t \t \t \t <a href='#' > 
 
\t \t \t \t \t <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" /> 
 
\t \t \t \t </a> 
 
\t \t \t </span> 
 
\t \t \t <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. 
 
\t \t \t </span> 
 
\t \t </div> 
 

 
\t \t <div class='gallery-item col-md-4 col-sm-6 col-xs-12'> 
 
\t \t \t <span class='sub-gallery-icon'> 
 
\t \t \t \t <a href='#' > 
 
\t \t \t \t \t <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" /> 
 
\t \t \t \t </a> 
 
\t \t \t </span> 
 
\t \t \t <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. 
 
\t \t \t </span> 
 
\t \t </div> 
 

 
\t \t <div class='gallery-item col-md-4 col-sm-6 col-xs-12'> 
 
\t \t \t <span class='sub-gallery-icon'> 
 
\t \t \t \t <a href='#' > 
 
\t \t \t \t \t <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" /> 
 
\t \t \t \t </a> 
 
\t \t \t </span> 
 
\t \t \t <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. 
 
\t \t \t </span> 
 
\t \t </div> 
 
    
 
</div>

Answer 1

我有一個發現，通過https://github.com/twbs/bootstrap/issues/9454

我已經更新的解決方案我的小提琴這裏：https://jsfiddle.net/oLderkuo/3/

每2 gallery item格後基本上我需要添加以下內容：

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

Answer 2

這個問題是引導應用出浮上來的同事*類 - 這意味着你的div不正確顯示 - 而不是將不必要的div添加到標記中以清除浮動 - 解決問題。

這段代碼將遍歷每個div，確定它的高度，如果它大於max-height將調整最大高度。然後它會將最大高度應用於所有div，問題將得到解決。

請注意，我已經爲此添加了調整大小的功能，並使用了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"> 
 

 
\t \t <div class='gallery-item col-md-4 col-sm-6 col-xs-12'> 
 
\t \t \t <span class='sub-gallery-icon'> 
 
\t \t \t \t <a href='#' > 
 
\t \t \t \t \t <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" /> 
 
\t \t \t \t </a> 
 
\t \t \t </span> 
 
\t \t \t <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. 
 
\t \t \t </span> 
 
\t \t </div> 
 

 
\t \t <div class='gallery-item col-md-4 col-sm-6 col-xs-12'> 
 
\t \t \t <span class='sub-gallery-icon'> 
 
\t \t \t \t <a href='#' > 
 
\t \t \t \t \t <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" /> 
 
\t \t \t \t </a> 
 
\t \t \t </span> 
 
\t \t \t <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. 
 
\t \t \t </span> 
 
\t \t </div> 
 

 
\t \t <div class='gallery-item col-md-4 col-sm-6 col-xs-12'> 
 
\t \t \t <span class='sub-gallery-icon'> 
 
\t \t \t \t <a href='#' > 
 
\t \t \t \t \t <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" /> 
 
\t \t \t \t </a> 
 
\t \t \t </span> 
 
\t \t \t <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. 
 
\t \t \t </span> 
 
\t \t </div> 
 
    
 
</div>