Question

我正在尝试将图像与Bootstrap 4对齐。我在.row中使用了.container。我现在在图像之间留有空格，我不希望这样。我希望图像彼此紧紧对齐，没有任何空格。任何建议将不胜感激。

<div class="container mycontainer">
    <div class="row">

        <div class="col-sm-12 col-md-6 col-lg-6" id="one">   <!-- FIRST ROW LEFT SIDE-->
            <img src="./images-for-sample/images-for-sample/investors-img-1.jpg" alt="" class="img-responsive" id="photo-1">
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6" id="two">    <!-- FIRST ROW RIGHT SIDE-->
            <img src="./images-for-sample/images-for-sample/investors-img-4.jpg" alt="" class="img-responsive" id="photo-4">
        </div>

    </div>
    <div class="row">

         <div class="col-sm-12 col-md-6 col-lg-6" id="three">   <!-- SECOND ROW LEFT SIDE-->
             <img src="./images-for-sample/images-for-sample/investors-img-2.jpg" alt="" class="img-responsive" id="photo-2">
         </div>
         <div class="col-sm-12 col-md-6 col-lg-6" id="four">    <!-- SECOND ROW RIGHT SIDE-->
             <img src="./images-for-sample/images-for-sample/investors-img-5.jpg" alt="" class="img-responsive" id="photo-5">
         </div>

    </div>
    <div class="row">

        <div class="col-sm-12 col-md-6 col-lg-6" id="five">   <!-- THIRD ROW LEFT SIDE-->
            <img src="./images-for-sample/images-for-sample/investors-img-3.jpg" alt="" class="img-responsive" id="photo-3">
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6" id="six">    <!-- THIRD ROW RIGHT SIDE-->
            <img src="./images-for-sample/images-for-sample/investors-img-6.jpg" alt="" class="img-responsive" id="photo-6">
        </div>

    </div>

</div>

我当前得到的输出是：

Answer 1

为了实现您的目标目标，您必须删除每个div的Bootstrap填充，并将图像宽度设置为其中的100％：

// you could also use img as a selector
.img-responsive {
  width: 100%;
}

// this is the selector of your div's
.col-sm-12 {
  padding: 0;
}

但是，由于当前的实现，这将导致以下（for a running fiddle click here）：

如果您还想删除图片中显示的空白，可以使用Bootstrap's card columns，如下所示：

<div class="card-columns">

    <div class="card" id="one">    <!-- FIRST ROW LEFT SIDE-->
        <img src="https://via.placeholder.com/350x200" alt="" class="img-responsive" id="photo-1">
    </div>
    <div class="card" id="two">    <!-- FIRST ROW RIGHT SIDE-->
        <img src="https://via.placeholder.com/350x150" alt="" class="img-responsive" id="photo-4">
    </div>

    <div class="card" id="three">   <!-- SECOND ROW LEFT SIDE-->
        <img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-2">
    </div>
    <div class="card" id="four">    <!-- SECOND ROW RIGHT SIDE-->
        <img src="https://via.placeholder.com/350x450" alt="" class="img-responsive" id="photo-5">
    </div>

    <div class="card" id="five">   <!-- THIRD ROW LEFT SIDE-->
        <img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-3">
    </div>
    <div class="card" id="six">    <!-- THIRD ROW RIGHT SIDE-->
        <img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-6">
    </div>

</div>

并根据需要调整一些CSS：

// the default column count is 1 and there should not be a space between the columns
.card-columns {
  column-count: 1;
  column-gap: 0;
}

// for medium devices and larger set the count to two
@media (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}

// reset card's margin bottom
.card {
  margin: 0 !important;
}

// scale images properly to fit the divs
img {
  width: 100%;
  max-width: 100%;
}

结果如下：

您可以找到正在运行的小提琴here。

如果您使用的是Bootstrap 3，请查看this Medium article。

祝你好运！

使用Bootstrap4对齐图像时出现问题

1 个答案: