Bootstrap不需要的圖像填充

Question

我想讓圖像填滿父div。我有4張圖片，我希望他們全部四張並排出現。由於我使用Bootstrap，因此我爲所有四個圖像分配了一個col-xs-3類。不過，我在每張圖片的左側和右側看到一個小填充。

這裏是什麼樣子的預覽：

我加白色邊框的每個圖像周圍，以檢查是否引導了正常工作。我遇到的問題是四個圓角矩形（假設爲4個按鈕），以及綠色勾號按鈕和紅色刪除按鈕。

我希望他們儘可能多的高度，但要分佈在Bootstrap網格的3列。有人可以幫忙嗎？我在這裏是一個完整的n00b嗎？

如果您需要更多詳細信息，請讓我知道。

在此先感謝！

這裏是div的HTML，如果你們需要的話。我沒有使用任何CSS他們：

<div class="viewGoals"> 
    <div class="container"> 
    <img src="images/b_back.png" class="col-xs-2 btnBackViewGoals btnBack"> 
    <img src="images/cookie.png" class="col-xs-4 col-xs-offset-2 titleImg"> 
    <div class="clearfix"></div> 
    <div class="goalPopulate"> 

     <div class="goalsHeader"> 
     <img src="images/b_pending.png" class="btnPendingGoals col-xs-3"> 
     <img src="images/b_complete.png" class="btnCompleteGoals col-xs-3"> 
     <img src="images/b_failed.png" class="btnFailedGoals col-xs-3"> 
     <img src="images/b_deleted.png" class="btnDeletedGoals col-xs-3"> 
     </div> 

     <div class="goalsPending"> 
     Pending Goals 
     </div> 

     <div class="goalsComplete"> 
     Complete Goals 
     </div> 

     <div class="goalsFailed"> 
     Failed Goals 
     </div> 

     <div class="goalsDeleted"> 
     Deleted Goals 
     </div> 

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

Answer 1

添加：

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
    paddding-right: 0; 
    padding-left: 0; 
} 

到你的CSS將消除填充。

JSFIDDLE