在小屏幕上保持同樣的行和列

Question

我在2行和3列中有6圖像在背景圖像上。我怎樣才能在小屏幕上保持相同的佈局？

在小屏幕上的響應式設計中，6圖像將垂直排列，如預期的那樣，但這不是我所需要的。我需要找到一種方法來縮小較小屏幕的6圖像，同時將其保留在背景圖像上相同的2行和3列中。

我可以張貼代碼，但我使用的是Python framework其採用了bootstrap framework所以如果我發佈的所有代碼它可能只是讓事情看起來更加複雜。我只是尋找一個簡單的CSS解決方案，或者可能是一個引導解決方案。

Answer 1

這應該做你想要什麼：

http://www.bootply.com/YteNmihNaO

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-4"> 
     <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg"> 
    </div> 
    <div class="col-xs-4"> 
     <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg"> 
    </div> 
    <div class="col-xs-4"> 
     <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-4"> 
     <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg"> 
    </div> 
    <div class="col-xs-4"> 
     <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg"> 
    </div> 
    <div class="col-xs-4"> 
     <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg"> 
    </div> 
    </div> 
</div> 

Answer 2

，如果你想在你只需要指定小媒體查詢一樣，所有屏幕尺寸採用同樣的佈局：

<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 
<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div>