Bootstrap Img對齊屏幕爲xs時使用列的問題

我有一個div列出了我在網站上顯示的軟件的屏幕截圖。當屏幕很大時，圖像正確對齊。Bootstrap Img對齊屏幕爲xs時使用列的問題

問題是，當我看到它在手機上或在電腦上更改窗口大小以摺疊的物品，還有的地方它沒有被正確對齊因某種原因空白。見下圖。

這裏是代碼的索引頁。在我看來，一切都應該正常工作，無需調整。

我試過的東西： - 刪除容器和行類。 - 將圖像的寬度一直降低到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 -->

任何幫助，將不勝感激。

來源

2016-06-10 DMort

這是由於圖像的高度不同。你能做些什麼將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); 
}

來源

2016-06-10 04:40:12 SESN

這工作檢查。謝謝。這是一個非常惱人的行爲，但我實際上使用照片編輯器修復了我的圖像並使其尺寸完全相同，但我相信您的代碼也可以工作。 – DMort

一個錯誤，請正確後/h2

<h2>Screenshots</h2>

來源

2016-06-10 04:58:40 Saika

woops！接得好！ :) – DMort

Bootstrap Img對齊屏幕爲xs時使用列的問題

回答

相關問題