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

【问题标题】：Bootstrap grid breaks (images with different height)Bootstrap 网格中断（不同高度的图像）
【发布时间】：2016-11-10 21:11:39
【问题描述】：

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

这会破坏网格，并且由于图像会根据屏幕宽度更改高度，因此我无法设置高度来修复它，我宁愿不使用 JS 或 jQuery 来计算每次宽度更改时每个图像的高度，所以我想知道是否有人单独使用 css 或引导类对此进行了巧妙的修复。

页面是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>

【问题讨论】：

请提供一些示例代码，反正你的链接坏了

标签： javascript jquery css twitter-bootstrap riot-games-api

【解决方案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 中

【讨论】：

我知道我可以强制一个高度来修复断裂，但是当站点扩展时这将不起作用。如果我在一行中使用一组 div，那么使用 bootstrap 是没有意义的。并且当站点扩展时，“行”不会有偶数。我正在寻找的是某种带有边距/填充或其他css（可能是伪元素）的技巧，以在需要的地方填充一个像素。如果不存在这样的解决方法，我可能不得不在 JS 中修复它。

【解决方案2】：

如果你可以应用 jquery，你可以从以下链接使用匹配高度 jquery 插件

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

要使其匹配高度，请将类 - 放在您想要相同高度的项目上。包含上面链接中的库后，使用以下代码启动示例

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

希望对你有帮助

【讨论】：