引导不需要的图像填充

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 {
    padding-right: 0;
    padding-left: 0;
}

到您的 css 将删除填充。

JSFIDDLE