方形图像的字段，它们之间没有间隙

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

每个col都有padding-left: 15px和padding-right: 15px。对这些cols进行填充：0 。创建一个新类（例如.myRow）不会影响Bootstrap的标准类。请注意，每个图像必须与cols的宽度一样大或更大！

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

Answer 2

方形图像的字段，它们之间没有间隙

注意！这些解决方案不适合不同高度的图像。

1。 HTML标签彼此非常接近

如果您的图像尺寸相同，您甚至可以使用非常直接的解决方案。我已将所有图像放在一行中并删除它们之间的空格。

不要忘记从图片中删除课程img-responsive。此类添加属性display: block;。此属性使所有图像一个位于另一个列中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 text-center"><a
      href="#"><img src="http://placehold.it/400x400/c69/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/9c6/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/69c/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/c96/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/6c9/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/96c/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/c69/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/9c6/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/69c/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/c96/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/6c9/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/96c/fff/?text=Work" alt=""></a></div>
  </div>
</div>

2。媒体查询确定一行中的图像数量

您可以使用与Bootstrap确定列宽度相同的方式确定图像的宽度。

.portfolio {
  padding: 0 !important;
}
.portfolio img {
  height: auto;
  width: 100%;
}
@media (min-width: 481px)  { .portfolio img { width: 50%; } }
@media (min-width: 768px)  { .portfolio img { width: 33.33%; } }
@media (min-width: 992px)  { .portfolio img { width: 25%; } }
@media (min-width: 1200px) { .portfolio img { width: 20%; } }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 portfolio"><a
      href="#"><img src="http://placehold.it/400x400/c69/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/9c6/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/69c/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/c96/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/6c9/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/96c/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/c69/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/9c6/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/69c/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/c96/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/6c9/fff/?text=Work" alt=""></a><a
      href="#"><img src="http://placehold.it/400x400/96c/fff/?text=Work" alt=""></a></div>
  </div>
</div>

3。 Bootstrap Grid

Neighboring answer提供了出色的解决方案。不幸的是，在图像大小小于列的宽度后，实现已经停止。

有两种方法可以进一步开展工作：

将图像拉伸到列的宽度
选择宽度小于图片

最好的方法是同时使用这两种可能性。

对所有图片使用属性width: 100%; height: auto;而非类img-responsive。
让我们为400 x 400像素的图像构建一个Bootstrap网格。看看Grid options：
- 手机肖像（少于481像素）→width: 100%;的一列;
- 手机风景（少于768像素）→col-xs-6的<2>列;
- 片剂（少于992像素）→col-sm-4的3列;
- 桌面（少于1200px）→再次出现3列;
- 大型桌面（1200px及以上）→col-lg-3的4列。

.portfolio > div {
  padding: 0 !important;
}
.portfolio img {
  width: 100%;
  height: auto;
}
@media (max-width: 480px) { 
  .col-xs-6 { 
    width: 100% !important; 
  } 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row portfolio">
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/c69/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/9c6/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/69c/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/c96/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/6c9/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/96c/fff/?text=Work" alt=""></a></div>

    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/c69/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/9c6/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/69c/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/c96/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/6c9/fff/?text=Work" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-lg-3"><a href="#"><img src="http://placehold.it/400x400/96c/fff/?text=Work" alt=""></a></div>
  </div>
</div>

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

2 个答案:

方形图像的字段，它们之间没有间隙

1。 HTML标签彼此非常接近

2。媒体查询确定一行中的图像数量

3。 Bootstrap Grid