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