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 つの画像があり、さらに小さいデバイスに 1 つの画像がある場合です。

4

1 に答える 1

0

最近のバージョンではなく、Bootstrap 2.x を使用しています。古いブートストラップでは、グリッド システムは 1 つしかありません。

画面が 768px を下回ると、すべてのスパン クラスがfloat:none;とwidth: 100%;これにより、多くのスペースがある場合でも、すべての画像がスタックに表示されます。

これがあなたの問題です：http://jsfiddle.net/shekhardesigner/jqPUR/

すべての画像を 1 つの 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 に答える