ブートストラップの列の中に動的なcol divを配置します。

Question

動的な数のcol項目をブートストラップの行に集中させたいと思います。私はブートストラップでこれを行う方法を見つけようとしましたが、完全に欠けているようです。

ブートストラップを使用している人がわかるように、コラムは一番左に移動します。動的なcol項目を1行にまとめることができます。最大12個の項目を追加する必要はありません（そのように提案しないでください）。これは、アイテムのリストを動的に配列する場合に重要です。あなたは好きなだけ多くの列を並べることができます。

私がしたいことは、行内にいくつのアイテムがあるかにかかわらず、ウィンドウの中央に座ることです。それらはすべてclass = "col-lg-2 col-md-3 col-sm-4 col-xs-6"のようなものになります。例：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        Something here 1 
       </div> 
      </div> 
     </div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        Something here 2 
       </div> 
      </div> 
     </div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        Something here 3 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

1,2,3またはそれ以上があります。私はそれがサーバー上で配列されているリストの中にどれだけ多くのアイテムがあるのか​​ということで、わからない。いずれにしても、パネルの数にかかわらず、その行全体が中央に配置される必要があります。

私はビューでサーバー側のコードを使用してdivをプログラムできることを知っていますが、それはかなり複雑になります。ブートストラップでこれを達成するには何らかの方法が必要です！私はそれを見つけていない。私は大量のSO答えを読んだが、それらのどれも私がやりたいことには関係していない。私はなぜあなたが単に行を中央に置くことができないのか分かりません - 非常にイライラします。

私はちょうど行colsの中心にしたいです。

Answer 1

行の中心にあるクラスを使用して、次のCSSを使用することができます。オフセット

.centered { 
    text-align: center; 
    font-size: 0; 
} 
.centered > div { 
    float: none; 
    display: inline-block; 
    text-align: left; 
    font-size: 13px; 
} 

http://jsfiddle.net/ug4fzcjd/64/