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网格中断（不同高度的图像）

回答

相关问题