引导网格中断（具有不同高度的图像）

Question

我目前正在使用Riot Games API，正在使用引导程序来管理“冠军”的网格，这些图像是从Riot的图像库加载的，但是有些图像（4-5）比其余图像低1px。

这会破坏网格，并且由于图像会根据屏幕宽度更改高度，因此我无法设置高度来固定它，因此我宁愿不使用JS或jQuery为每个宽度更改来计算每个图像的高度，所以我我想知道是否有人可以单独使用css或bootstrap类来解决此问题。

该页面是www.mathias-syversen.net

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

Answer 1

您需要使用相同高度的图像，或者需要为所有图像定义相同的高度。

第6张图像的尺寸为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}

或者您需要将class =“ col- *”的div固定编号放入class =“ row”的单个div中

Answer 2

如果您可以应用jquery，则可以通过以下链接使用高度匹配的jquery插件

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

为了使其与高度匹配，请在您想要相同高度的项目上放置类-项目。 在从上面的链接包含库之后，使用以下代码初始化示例

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

希望这可以帮助