html - 当屏幕为 xs 时使用列引导 Img 对齐问题

Question

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

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

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

我尝试过的事情:-删除容器和行类。- 将图像的宽度一直降低到 80%，即使是 100% 也应该有效- 添加 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>