html - Bootstrap 不需要的图像填充

Question

我试图让图像填满父级 div。我有 4 张图片，我希望所有四张并排显示。因为我使用的是 Bootstrap，所以我为所有四个图像分配了一个 col-xs-3 类。但是，我在每张图片的左右两侧看到了一个小填充。

这是它的外观预览:

我在每个图像周围添加了白色边框，以检查 Bootstrap 是否正常工作。我遇到的问题是四个圆 Angular 矩形(应该是 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 {
    padding-right: 0;
    padding-left: 0;
}

您的 css 会删除填充。

JSFIDDLE