4

Rails アプリにサムネイルのグリッドがありますが、ブートストラップでグリッドを正しく表示するのに問題があります。以下に示すように、新しい行が正しく開始されていません! ここで何をすべきかわからない。以下に HTML を含めましたが、ブートストラップの例に準拠していることがわかります。

<div id="image-grid" class="col-lg-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
<div class="col-sm-6 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

表示されるもの

4

6 に答える 6

7

高さの問題です。

私は今同じことを解決しています。余分な行コンテナーを捨てて、列のセット全体を単一の行にグリッドアウトしたい場合は、基本的に2つのオプションがあります。

  1. グリッド内のすべての要素が同じ高さであることを確認するには、css でコンテンツを制限します (または、各要素に押し込まれるコンテンツを制御するだけです)。

  2. 小さな jQuery コードをページに追加して、サムネイル要素をスキャンし、それらのコンテナーをグリッド内の最大要素と同じ高さに拡張できます。同じ高さの jQuery プラグインについては、Google で検索してください。たくさんあります。必ず行う必要があるもう 1 つのことは、サイズ変更時にプラグインを再度トリガーすることです。これは、コンテンツの拡大/縮小を可能にするレスポンシブ動作により、要素が再び異なる高さで巻き上げられる可能性があるためです。ブートストラップの col クラスと jQuery の高さのバランス調整の組み合わせは、私にとっては非常にうまく機能しています。

于 2013-09-25T05:36:21.270 に答える
0

グリッドがどのように表示されるかを説明するか、画像を追加してください (デスクトップ、タブレット、モバイル)。今、私たちは推測しなければなりません。

クラス col-md-2 列の行には、6 列 (6 x 2 = 12) を含めることができます。ネストされた列を使用して、以下のコードを試してください ( http://getbootstrap.com/css/#grid-nestingを参照)。

<div class="container">     
<div class="row">
<div id="image-grid" class="col-sm-12 col-md-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
</div>
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
</div>
</div>

<div class="col-sm-12 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>
于 2013-09-15T18:34:03.363 に答える
-2

これで問題が解決します

<div class="col-xs-6 col-md-3">
   <div class="well">
       content goes here...
   </div>
</div>
于 2014-09-04T09:41:21.317 に答える