如何在啓動時小型設備上顯示不阻止？

Question

我使用引導程序作爲框架UI。這段代碼用於顯示一些圖像。

<div class='row-fluid'> 
<div class='span3'><img 1></div> 
<div class='span3'><img 2></div> 
<div class='span3'><img 3></div> 
<div class='span3'><img 4></div> 
</div> 

但使用小型設備時，圖像使用CSS塊（有很多的右側空間，請參見下圖）。 http://www.flickr.com/photos/99955339@N06/9975583665/

如何製作，這個圖像沒有阻塞（已經使用相同的空間），我的意思是如果小設備在同一行上有兩個圖像，而較小的圖像又有一個圖像。

Answer 1

您正在使用Bootstrap 2.x，而不是最新版本。在舊的bootstrap中 - 他們只有一個網格系統。

當屏幕低於768px時，所有跨度類都有float:none;和width: 100%;即使有很多空間，這也會使所有圖像顯示在堆棧中。

這裏是你的問題：http://jsfiddle.net/shekhardesigner/jqPUR/

你可以用所有的圖像在一個DIV，或span12和所有設置爲你需要的東西：

<div class='row-fluid'> 
    <div class='span12 img-list'> 
     <img src="http://lorempixel.com/300/160/" /> 
     <img src="http://lorempixel.com/300/160/" /> 
     <img src="http://lorempixel.com/300/160/" />   
     <img src="http://lorempixel.com/300/160/" /> 
    </div> 
</div> 

小CSS更好的間距：

.img-list img { 
    margin:0 20px 20px 0; 
} 

請看這裏：http://jsfiddle.net/shekhardesigner/jqPUR/2/

如果你想使用Bootstrap 3 - 你有4個不同的網格系統，以任何你想要的方式製作UI。

使用引導3.

<div class='row'> 
<div class='col-lg-3 col-sm-4 - col-sm-3 col-xs-6'><img src="http://lorempixel.com/300/160/" /></div> 
<div class='col-lg-3 col-sm-4 - col-sm-3 col-xs-6'><img src="http://lorempixel.com/300/160/" /></div> 
<div class='col-lg-3 col-sm-4 - col-sm-3 col-xs-6'><img src="http://lorempixel.com/300/160/" /></div> 
<div class='col-lg-3 col-sm-4 - col-sm-3 col-xs-6'><img src="http://lorempixel.com/300/160/" /></div> 
</div> 

http://jsfiddle.net/shekhardesigner/LPG3S/