如何在启动时小型设备上显示不阻止？

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/