当屏幕为xs时，Bootstrap Img使用列对齐问题

Question

我有一个div，列出了我在网站上显示的软件截图。当屏幕很大时，图像正确对齐。

问题是，当我在手机上查看它或更改计算机上的窗口大小以折叠项目时，由于某种原因，它没有正确对齐的空白空间。见下图。

这是索引页面上的代码。在我看来，一切都应该工作正常，没有调整。

我尝试过的事情： - 删除容器和行类。 - 将图像的宽度一直降低到80％，即使100％也应该工作 -adding class =“img-responsive”，如另一个线程所示。 - 删除图像所在的div的边距和填充。

<!-- Screenshots -->
<div id="screenshots">
    <div class="container">
    <br>
        <div class="row text-center"> <!-- Screenshot DIV -->
            <h2>Screenshots<h2>
            <div class="col-md-2 col-xs-6">
                <img src="images/screenshots/dashboard.png" alt="Dashboard SS" class="img-responsive" width="100%" />
            </div>
            <div class="col-md-2 col-xs-6">
                <img src="images/screenshots/lotmanager.png" alt="Lot Manager SS" class="img-responsive" width="100%" />
            </div>
            <div class="col-md-2 col-xs-6">
                <img src="images/screenshots/register.png" alt="Register SS" class="img-responsive" width="100%" />
            </div>
            <div class="col-md-2 col-xs-6">
                <img src="images/screenshots/sell.png" alt="Auction SS" class="img-responsive" width="100%" />
            </div>
            <div class="col-md-2 col-xs-6">
                <img src="images/screenshots/checkout.png" alt="Checkout SS" class="img-responsive" width="100%"/>
            </div>
            <div class="col-md-2 col-xs-6">
                <img src="images/screenshots/samplereceipt.png" alt="Receipt SS" class="img-responsive" width="100%" />
            </div>
        </div><!-- /.Screenshot DIV -->
        <br>
    </div><!-- /.container -->
</div><!-- /.screenshots -->

任何帮助都将不胜感激。

Answer 1

您的代码中存在一个错误，请在正确/h2

后进行检查

<h2>Screenshots</h2>

Answer 2

这是由于图像的高度不同。你能做什么将img的父div设置为图像组的最大高度？

var maxheight;
$('#screenshots .container > div > img').each(function(){
var currHeight = $(this).height();
if(maxHeight < currHeight) {
maxHeight = currHeight;
}
});
if(window.width() < 768) {
$('#screenshots .container > div').hieght(maxHeight);
}