Question

我使用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块（右侧有很多空间，请参见下图）。 http://www.flickr.com/photos/99955339@N06/9975583665/

如何制作，这个图像没有阻挡（已经使用了相同的空间），我的意思是如果小型设备在同一行上有2个图像而小的则再次有一个图像。

Answer 1

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

当屏幕低于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。

使用Bootstrap 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/

如何在bootstrap上小设备时显示不阻塞？

1 个答案: