ブートストラップ3列の位置付け

Question

私は、3つの等しい列を、容器の液体の内側の両側に等しいパディングで正確に行の中央に揃えようとしています。私はそれらをページの中央に置くことができません。これらの3つの列が存在するコンテナに幅を設定しようとしました。レイアウトは片方向に進み、決して中央に配置されません。添付

<div class="container"> 
    <div class="row yellow"> 
     <div class="col-lg-12 "> 
     <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center"> 
      test 
     </div> 
     <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center"> 
      test 
     </div> 
     <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center"> 
      test 
     </div> 

     </div> 
    </div> 
    </div> 

私はrecieving午前出力されます： output

をここに示すように、レイアウトを右に整列され、私はそれがこれらの列の間で同等のパディングと完全に中央揃えにしたいです。

これがどのように達成できるのかよく知っていれば、私はしばらくこのことをやろうとしています。あなたの提案は間違いなくこれを修正するのに役立ちます。事前に

おかげで

Answer 1

あなたの問題は、あなたのレイアウトは

col-lg-3が+ + col-lg-3col-lg-3は、グリッド・システム9列にし、ブートストラップに合算されて、あなたが12列を持っている... 12列に合算されていないされていること行ごとに。

col-xxs-**クラスもありません。 （LG =大; MD =中; SM =小さな; XS =余分小）

これはトリックを行うshoud：

<div class="container"> 
    <div class="row yellow"> 
    <div class="col-lg-12 "> 
     <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center"> 
     test 
     </div> 
     <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center"> 
     test 
     </div> 
     <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center"> 
     test 
     </div> 
    </div> 
    </div> 
</div> 

が、詳細についてはBootrstapsドキュメントを見てみましょうグリッド・システム：@Sadiが言うようにhttp://getbootstrap.com/css/#grid

Answer 2

、レイアウトは、12件のcolsで作られているので、あなたはCOL-LG-4にCOL-LG-3から、あなたの列を変更shoold。プラス、あなたは、内側容器にあなたの緑を適用する必要がありますそうでなければ、パディング持ちません。

<div class="container"> 
<div class="row yellow"> 
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center"> 
     <div class="green"> 
     test 
     </div> 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center"> 
     <div class="green"> 
     test 
     </div> 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center"> 
     <div class="green"> 
     test 
     </div> 
    </div> 
</div> 

Codepenを：https://codepen.io/giannidk/pen/ZymdOy