Question

我目前正在使用Riot Games API，我使用bootstrap来管理＆＃34; Champions＆＃34;这些图像是从Riot的图像库中加载的，但有些图像（4-5）比其他图像低1px。

这打破了网格，由于图像根据屏幕宽度改变高度，我无法设置高度来修复它，我宁愿不使用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>

Answer 1

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

第6张图片的尺寸为307 * 557，其余尺寸为不同尺寸。

class Department(models.Model):
    name = models.CharField(_('department name'), max_length=255)

class Students(models.Model):
    first_name = models.CharField(_('first name'), max_length=30)
    last_name = models.CharField(_('last name'), max_length=30)
    department = models.ForeignKey('Department')

/ *和样式表* /

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

或者您需要将div的修订号放在class =＆＃34; col - *＆＃34;使用class =＆＃34; row＆＃34;

进入单个div

Answer 2

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

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

要使其匹配高度，请将类别 - 项目放在您想要相同高度的项目上。在包含来自上面链接的库之后使用以下代码无关样本

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

希望这有帮助

Bootstrap网格中断（不同高度的图像）

2 个答案: