html - 如何使用 bootstrap 3 在图像之间添加不留边距或填充？

Question

我正在尝试在单页网站上创建作品集部分，图像之间没有边距或填充。

我如何使用 Bootstrap 3 实现这一点我试过了，但最终在平板电脑/台式机断点处出现负边距:

HTML

<!-- Projects Row -->
  <div class="row">
      <div class="col-md-3 col-sm-6 portfolio-item">
          <a href="#">
              <img class="img-responsive" src="../asset/portfolio-work/work-one.png" alt="">
          </a>
      </div>
      <div class="col-md-3 col-sm-6 portfolio-item">
          <a href="#">
              <img class="img-responsive" src="../asset/portfolio-work/work-two.png" alt="">
          </a>
      </div>
      <div class="col-md-3 col-sm-6 padding-0 portfolio-item">
          <a href="#">
              <img class="img-responsive" src="../asset/portfolio-work/work-three.png" alt="">
          </a>
      </div>
      <div class="col-md-3 col-sm-6 portfolio-item">
          <a href="#">
              <img class="img-responsive" src="../asset/portfolio-work/work-four.png" alt="">
          </a>
      </div>

      <div class="col-md-3 col-sm-6 portfolio-item">
          <a href="#">
              <img class="img-responsive" src="../asset/portfolio-work/work-five.png" alt="">
          </a>
      </div>
      <div class="col-md-3 col-sm-6 portfolio-item">
          <a href="#">
              <img class="img-responsive" src="../asset/portfolio-work/work-six.png" alt="">
          </a>
      </div>
      <div class="col-md-3 col-sm-6 portfolio-item">
          <a href="#">
              <img class="img-responsive" src="../asset/portfolio-work/work-seven.png" alt="">
          </a>
      </div>
      <div class="col-md-3 col-sm-6 portfolio-item">
          <a href="#">
              <img class="img-responsive" src="../asset/portfolio-work/work-eight.png" alt="">
          </a>
      </div>
  </div>
  <!-- /.row -->

Answer 1

每个列都有一个 padding-left: 15px 和 padding-right: 15px。为这些列设置padding: 0。创建一个新类(例如 .myRow)以不影响 Bootstrap 的标准类。请注意，每个图像必须与列的宽度一样大或更大!

HTML

<div class="row myRow">
  <div class="col-md-3 col-sm-6 portfolio-item">
      <a href="#">
          <img class="img-responsive" src="http://www.lorempixel.com/500/500/sports/1" alt="">
      </a>
  </div>
  ...
</div>

CSS

.myRow > [class^="col-"] {
    padding: 0;
}