Bootstrap網格中斷（不同高度的圖像）

-1

我目前在使用Riot Games API，我使用Bootstrap管理「冠軍」的網格，這些圖像是從Riot的imagebase加載的，但有些（4-5 ）比其他的要低1px。Bootstrap網格中斷（不同高度的圖像）

這打破了網格，並且由於圖像根據屏幕寬度改變了高度，我無法設置高度來修復它，所以我寧願不使用JS或jQuery來計算每個圖像寬度變化時的高度，所以我想知道是否有人單獨使用css或bootstrap類來解決這個問題。

<div class="row"> 
<?php foreach ($champs as $champ) { ?> 
    <div id="id-<?php echo $champ[id] ?>" class="champion col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
     <div class="thumbnail"> 
      <a href="/page/champion.php?id=<?php echo $champ[id] ?>"> 
       <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/<?php echo $champ[key] ?>_0.jpg" alt="<?php echo $champ[name] ?>"> 
       <div class="name-tag"><?php echo $champ[name] ?></div> 
      </a> 
     </div> 
    </div> 
<?php } ?> 
</div>

來源

2015-05-29 Mathias Syversen

請提供一些示例代碼，反正你的鏈接被打破 – empiric

您需要使用相同高度的圖像或需要定義一個相同高度的所有圖像。

第六張圖片的尺寸爲307 * 557，其他尺寸爲不同尺寸。

<div class="thumbnail fix_block"> 
    <a href="/page/champion.php?id=78"> 
     <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Poppy_0.jpg" alt="Poppy"> 
     <div class="name-tag">Poppy</div> 
    </a> 
</div>

/*和成樣式*/

.fix_block{height:350px}

，或者您需要把與格的固定數量的類= 「同事*」與類= 「行」

來源

2015-05-29 06:38:58

我知道我可以強制的高度來修復斷裂，但當網站縮放時不會工作。如果我在一行中使用一組div的集合，那麼在使用引導程序時沒有意義。當網站縮放時，「行」將不會有偶數。我在找什麼是一些邊緣/填充或其他css（也許是一個psuedo元素）的技巧來填補它需要的一個像素。如果沒有這樣的解決方法存在，我可能不得不解決它在JS中。 –

單格

如果你可以申請的jQuery你可以使用匹配的高度jQuery插件從以下鏈接

http://brm.io/jquery-match-height/ 演示：http://brm.io/jquery-match-height-demo/

爲了使它匹配高度把類像項目上的項目你想要相同的高度。隨着包括上述

$(function() { 
    $('.sameHeight .item').matchHeight(); 
})

希望從鏈接庫後，下面的代碼innitiated示例這有助於

來源

2016-11-10 13:11:39 Fayaz

Bootstrap網格中斷（不同高度的圖像）

回答

相關問題