ブートストラップグリッドに最初のn個の項目を表示する

Question

私は、ブートストラップグリッドを利用したレスポンシブデザインのページで作業します。仕様によると、より大きな画像でグリッドの最初の線を表示する必要があります。通常、最初の行に残りのグリッドが各行に4つのイメージを持っている場合は、3つのイメージが必要です。私が達成しようと何

は最高次の画像で示されている：

は、どのように私はこの作業を行うことができますか？私はすべてのクライアントコードを制御するので、クラス、CSS、およびJavaScriptのソリューションはすべて受け入れられます。

Answer 1

これはあなたが始める必要があります：彼らは他のすべてが標準のブートストラップクラスを使用して、グリッドの変化に浮くことができるようにhttp://codepen.io/panchroma/pen/BLrvAw

すべての要素は、同じ行にあります。

すべての.col要素の高さが同じ場合、これはうまく機能すると付け加えておきます。これらのブートストラップ列要素はすべてfloat:left;であり、高さが異なる場合、一部のdivが予想される位置に浮かない可能性があります。この問題を解決するには、選択した列要素にカスタムスタイルを適用する必要があります。 clear:left;

幸運を祈る！

<div class="row"> 
<div class="col-md-4 col-sm-6 col-xs-12">1</div> 
    <div class="col-md-4 col-sm-6 col-xs-6">2</div> 
    <div class="col-md-4 col-sm-4 col-xs-6">3</div> 

<div class="col-md-3 col-sm-4 col-xs-6">4</div> 
    <div class="col-md-3 col-sm-4 col-xs-6">5</div> 
    <div class="col-md-3 col-sm-4 hidden-xs">6</div> 
    <div class="col-md-3 col-sm-4 hidden-xs">7</div> 

<div class="col-md-3 col-sm-4 hidden-xs">8</div> 
    <div class="col-md-3 col-sm-4 hidden-xs">9</div> 
    <div class="col-md-3 col-sm-4 hidden-xs">10</div> 
    <div class="col-md-3 col-sm-4 hidden-xs">11</div> 
</div> 

Answer 2

私はブートストラップ列クラスを設定したループ内に手動でクラスを追加することでこれを解決しました。

if(idx === 0){ 
    containerElem.append($('<span class="col-xs-12 col-sm-6 col-md-4 game-wrapper"></span>').append(item)); 
} else if (idx === 1){ 
    containerElem.append($('<span class="col-xs-6 col-sm-6 col-md-4 game-wrapper"></span>').append(item)); 
} else if (idx === 2) { 
    containerElem.append($('<span class="col-xs-6 col-sm-4 col-md-4 game-wrapper"></span>').append(item)); 
} else{ 
    containerElem.append($('<span class="col-xs-6 col-sm-4 col-md-3 game-wrapper"></span>').append(item)); 
} 

最初の項目は "COL-XS-12" なるようにするために、第一及び第二の項目は、 "COL-SM-6" を取得し、最初の3つの項目は、 "COL-MD-4" を得ます。

おそらくもっとも洗練されたソリューションではないかもしれませんが、少なくとも機能します。