屏幕为xs时使用列的Bootstrap Img Align Issue

Question

I have a div that lists screenshots for my software that I'm displaying on a website. When the screen is big the images align properly.

The problem is when I view it on the phone or change the window size on the computer to collapse the items, there's empty space where it's not being aligned properly for some reason. See Picture below.

Here is the Code on the index page. In my opinion, everything should work fine without adjustments.

Things I've tried: -Removing the container and row classes. -Changing the width of the images all the way down to 80%, which even 100% SHOULD work -Adding class="img-responsive" as seen in another thread. -Removing margins and padding for the divs the images are in.

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

Any help would be appreciated.

Answer 1

您的代码中有一个错误，请检查正确的/h2

 <h2>Screenshots</h2> 

Answer 2

It is due to different height of the images. What can u do Set the parent div of the img to the maximum height from the group of the images?

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);
}