水平居中3色的3格

Question

我有一個場景，我需要將col3的3個居中居中。計算時，答案顯示爲1.5，但克服這一挑戰的正確方法是什麼？

<div class="row"> 
    <div class="col-md-offset-2 col-md-3" style="height: 50px; background-color: red"> 
    </div> 

    <div class="col-md-3" style="height: 50px; background-color: green">  
    </div> 

    <div class="col-md-3" style="height: 50px; background-color: orange">  
    </div> 
</div> 

這裏是一個小提琴：https://jsfiddle.net/DTcHh/25558/

col-md-offset-2是搞亂這個，因爲它留下col-1的另一端。如果有col-md-offset-1.5，這將是輝煌的，但顯然沒有:(

我嘗試添加填充和利潤，它開始變得非常混亂，並認爲我引導到錯誤的方式。

什麼是正確的方法居中3周的div沒有任何哈克的方式？

Answer 1

我已經從第一內的div擦除偏移類，（在我的例子.x）分配該特定.row容器的附加類和添加以下的CSS來的溶液該類：

.x { 
    width: 100%; 
    margin: 0 12.5%; 
} 

下面是一個codepen與完整代碼：http://codepen.io/anon/pen/bwRZyJ

Answer 2

嘗試移除偏移量，以及用於4.

<div class="row"> 
    <div class="col-xs-4" style="height: 50px; background-color: red"> 

    </div> 
    <div class="col-xs-4" style="height: 50px; background-color: green"> 

    </div> 
    <div class="col-xs-4" style="height: 50px; background-color: orange"> 

    </div> 
</div> 

這使得3周的div連續變化如圖3所示，拍攝畫面每一個

％

UPDATE：

<div class="container"> 
     <div class="row col-xs-10 col-xs-offset-1"> 
     <div class="col-xs-3" style="height: 50px; background-color: red"> 

     </div> 
     <div class="col-xs-3" style="height: 50px; background-color: green"> 

     </div> 
     <div class="col-xs-3" style="height: 50px; background-color: orange"> 

     </div> 
     </div><!--row--> 
    </div><!--container-->