Html 图像在引导上未正确对齐

我目前正在学习使用boot strap进行前端开发，我似乎遇到了一个问题，当我将浏览器调整到平板电脑大小时，我的网格上的图像似乎有一个“额外”框

目前我有9张图片，我已经用下面的代码解决了它

                <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <!-- 2nd row -->
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <!-- 3rd row -->
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>      
            </div>
        </div>

实际代码可在此链接中找到。请注意，我仍然在使用Bootstrap3

---

提前谢谢。

你的第四张照片比其他照片小。所有照片都是500 x 333像素，但都是500 x 331像素

基本上是这样。图像中缺少的2px正在“错误”位置创建新行

---

您可以通过编辑图像或使用CSS（height:333px）甚至img标记（height='333'）的HTML属性来确保图像具有相同的高度。

您的第四张照片比其他照片小。所有照片都是500 x 333像素，但都是500 x 331像素

基本上是这样。图像中缺少的2px正在“错误”位置创建新行

---

您可以通过编辑图像或使用CSS（height:333px）甚至img标记（height='333'）上的HTML属性来确保图像具有相同的高度。

这不是一个额外的框，所发生的事情是，您使用的是

bootstrap

Previor 4.0，它会在其网格系统上浮动元素。当你的第四个图像高度（331px）小于其他图像高度（333px）时，浮动流中断

您可以使用新的4.0+

bootstrap

，它在网格系统上使用FlexBox，它将解决这个问题。或者你也可以在Bootstrap3上应用clearfix方法，请参阅进一步

见：

另见：

图像库

马尼拉——一堆我出生的城市的照片（还有我没有拍的照片）

这不是一个额外的框，所发生的事情是您正在使用

引导

Previor 4.0，它将元素浮动在其网格系统上。当你的第四个图像高度（331px）小于其他图像高度（333px）时，浮动流中断

您可以使用新的4.0+

bootstrap

，它在网格系统上使用FlexBox，它将解决这个问题。或者你也可以在Bootstrap3上应用clearfix方法，请参阅进一步

见：

另见：

图像库

马尼拉——一堆我出生的城市的照片（还有我没有拍的照片）

是的，这些人是对的，第四张图片更大

请参见这里的Bootstrap3版本

但是，如果您使用Bootstrap4，那么这不是一个问题。灵活的规则

请参见这里的Bootstrap4版本

或者通过确保图像比例恒定来进行相应的修复

.jsfiddle-code {
 i-have: none;
}

---

是的，这些人是对的，第四张照片更大

请参见这里的Bootstrap3版本

但是，如果您使用Bootstrap4，那么这不是一个问题。灵活的规则

请参见这里的Bootstrap4版本

或者通过确保图像比例恒定来进行相应的修复

.jsfiddle-code {
 i-have: none;
}

---

他的代码使用的是bootstrap3，而你的代码使用的是bootstrap4。。。相反，给IMG一个宽度：100%，你可以使用

bootstrap

native类

。IMG fluid

Ahh我需要更好地阅读我的资源。。。你的权利。请看这里，但我看不到他的图像有任何差距或问题。他的代码使用引导3，而您使用的是引导4。。。相反，给IMG一个宽度：100%，你可以使用

bootstrap

native类

。IMG fluid

Ahh我需要更好地阅读我的资源。。。你的权利。请看这里，但我看不到他的图片有任何差距或问题。谢谢你的回复。修复了关于图像大小的问题，并且能够得到我想要的结果。感谢回复。修复了有关图像大小的问题，并且能够得到我想要的结果。