Twitter bootstrap 当小型设备处于引导状态时，如何显示不阻塞？

我使用bootstrap作为框架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块（右侧有很多空间，请参见下图）

---

如何制作，此映像不阻塞（已使用相同的空间），我的意思是，如果小型设备在同一行上有两个映像，而较小的设备又有一个映像。

您使用的是Bootstrap 2.x，而不是最新版本。在旧的引导系统中，它们只有一个网格系统

当屏幕低于768px时，所有跨度类都有

float:none和<代码>宽度：100%这使您的所有图像在堆栈中显示，即使在空间很大的情况下也是如此

这是你的问题：

您可以将所有图像包装在一个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>

请看这里：

如果你想使用Bootstrap3，你有4个不同的网格系统来创建你想要的UI

一个使用Bootstrap3的简单演示

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




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