Bootstrap unwanted image padding

问题

I'm trying to make an image fill up the parent div. I have 4 images, and I want all four of them to appear side by side. Since I'm using Bootstrap, I assigned a col-xs-3 class to all four images. However, I see a small padding around the left and right of each image.

Here's a preview of what it looks like:

I added white borders around each image, to check if bootstrap was working correctly. The problem I have are the four rounded rectangles (Supposed to be 4 buttons), as well as the green tick button and the red delete button.

I want them to take as much height as they want, but be spread across 3 columns of the Bootstrap grid. Can someone help? Am I being a complete n00b here?

Please let me know if you need any more details.

Thanks in advance!

Here's the HTML of the div, if you guys need it. I did not use any CSS on them:

<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>

回答1:

Adding:

.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;
}

to your css would remove the padding.

JSFIDDLE

来源：https://stackoverflow.com/questions/28366978/bootstrap-unwanted-image-padding

标签

html

css

image

twitter-bootstrap

padding