ブーストストラップ3、3列、2番目に配置

Question

私はブートストラップ3のレイアウトを持っています。コンテンツは12の利用可能な列のうちの10を基にしています。ブラウザウィンドウの両方、左右から1列幅 - 私はそれになりたいと、私は残っていると右の列が配置これにより

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-3 col-lg-offset-1">LEFT COL</div> 
     <div class="col-lg-3">CENTER COL</div> 
     <div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div> 
    </div> 
</div> 

：のは、私はこのような何かを持っているとしましょう。そして、私は中央の列を正確に中央と左の列と右の列の間に配置し、それらの間に同じマージンを持たせたいと思います。

オフセット/プル/プッシュブートストラップクラスを使用している場合、それらはポジショニング列が左または右に大きくなり過ぎます。

私は独自の回避策クラスを作成しました.col-lg-offset-1のように動作します。私はcalc（）関数を使ってブートストラップのパーセンテージ値からピクセル単位でオフセットを減算しています。しかし、私の意見では、この解決策の種類は吸う。

アドバイスはありますか？

編集：

sample image to describe better

Answer 1

あなたは後にしているものを手に入れるの列内のコンテンツを揃えることができませんか？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-4">LEFT COL</div> 
 
     <div class="col-xs-4 text-center">CENTER COL</div> 
 
     <div class="col-xs-4 text-right">RIGHT COL</div> 
 
    </div> 
 
</div>

Answer 2

私は、これはブートストラップで行うことができないと考えています。しかし、カスタマイズされたクラスと追加のマークアップを追加することで、この結果を達成できます。これはあなたのために働くと何も壊れていない場合は試してみてください：P

HTML

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-lg-3 col-lg-offset-1">LEFT COL</div> 
    <div class="col-lg-4"> 
     <div class="col-center col-lg-9"> CENTER COL 
     </div> 
    </div> 
    <div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div> 
</div> 
</div> 

CSS

.col-center { 
    margin: auto; 
    float: none; 
} 

Answer 3

あなたはフレキシボックスを追加し、均等にCOLSを配布することができます。