Question

在下面的代码中，我插入了5张图片，但我不能将它们全部放在一行中，并消除它们之间的间距。

    <section class="images">
      <div class="row">
         <div class="col-lg-3">
             <img class="img-responsive" src="images1.jpg" alt="images1" max-width="400px" max-height="95px" width="auto" height="auto">
         </div>
         <div class="col-lg-3">
             <img class="img-responsive" src="images2.jpg" alt="images2" max-width="230px" max-height="95px" width="auto" height="auto">
         </div>
         <div class="col-lg-3">
             <img class="img-responsive" src="images3.jpg" alt="images3"  max-width="230px" max-height="95px" width="auto" height="auto">
         </div>
         <div class="col-lg-3">
             <img class="img-responsive" src="images4.jpg" alt="images4" max-width="230px" max-height="95px" width="auto" height="auto">
         </div>
          <div class="col-lg-3">
             <img class="img-responsive" src="images5.jpg" alt="images1">
         </div>
      </div>
   </section>

如何将5幅图像放在一起并消除图像之间的空间？

Answer 1

Bootstrap列div带有填充。消除它们：

.row div {padding:0;}

Answer 2

让我们将行划分为一个宽图像和四个窄图像。

1 x 400px + 4 x 230px = 1320px
400px / 1320px = 10 / 33
230px / 1320px = 23 / 132

糟糕，此类部件不适合基于12列的布局。因为每个列都必须

1320px / 12 = 110px

我建议稍微改变图像的宽度：

440px = 4 x 110px
220px = 2 x 110px

440像素宽的图像将占据12列中的4列。 220像素宽的图像将占据12列中的2列。

删除列之间的间隙：

.images {
  padding: 0 15px;
}
.images .col-lg-2,
.images .col-lg-4 {
  padding: 0;
}

Bootstrap确定img-responsive，如下所示：

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

因此，我们写

width="100%"

而不是

max-width="...px" max-height="95px" width="auto" height="auto"

检查结果：

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.images {
  padding: 0 15px;
}
.images .col-lg-2,
.images .col-lg-4 {
  padding: 0;
}

＆＃13;

<section class="images">
  <div class="row">
    <div class="col-lg-4">
      <img class="img-responsive" src="http://placehold.it/440x95" alt="images1" width="100%">
    </div>
    <div class="col-lg-2">
      <img class="img-responsive" src="http://placehold.it/220x95/ddd" alt="images2" width="100%">
    </div>
    <div class="col-lg-2">
      <img class="img-responsive" src="http://placehold.it/220x95" alt="images3" width="100%">
    </div>
    <div class="col-lg-2">
      <img class="img-responsive" src="http://placehold.it/220x95/ddd" alt="images4" width="100%">
    </div>
    <div class="col-lg-2">
      <img class="img-responsive" src="http://placehold.it/220x95" alt="images5" width="100%">
    </div>
  </div>
</section>

＆＃13;

Answer 3

你也可以简化事情！将所有内容放在col-lg-12中，然后将图像添加为内联列表的元素。如果您不需要每个图像的列，内联列表应该可以正常工作。然后，您只需调整li img元素的边距/填充，以确定它们之间需要多少空间。

更简单，不是吗？

Answer 4

理想情况下，全宽为100％。因此，如果您需要5张图像，则只需将100除以5即可得到20％。检查html代码：

    <footer class="images">
            <div class="row">

                    <div class="col-lg-2">
                      <img class="img-responsive" id="responsive" src="Dollarphotoclub_79081264-copy.jpg" alt="images1">
                    </div>
                    <div class="col-lg-2">
                      <img class="img-responsive" id="responsive" src="beds.jpg" alt="images1">
                    </div>
                    <div class="col-lg-2">
                      <img class="img-responsive" id="responsive" src="bed-cream.jpg" alt="images1">
                    </div>
                    <div class="col-lg-2">
                      <img class="img-responsive" id="responsive" src="soaps.jpg" alt="images1">
                    </div>
                    <div class="col-lg-2">
                      <img class="img-responsive" id="responsive" src="Dollarphotoclub_79081264-copy.jpg" alt="cake2">
                    </div>
              </div>
         </footer>

css代码如下：

.masterfooter .col-lg-2 {
 width: 20%;
 float: left;
}

将图像对齐在一起

4 个答案: