0

我使用引导程序作为框架 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 个图像，而较小的设备又有一个图像。

4

1 回答 1

0

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

当屏幕低于 768px 时，所有 span 类都有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/

于 2013-09-29T17:20:09.523 回答