Проблема с выравниванием изображений с помощью Bootstrap4

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

Для достижения вашей целевой цели вам необходимо удалить отступы Bootstrap для каждого div и установить ширину изображений на 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;
}

Однако из-за вашей текущей реализации это приведет к следующему ( для работающей скрипки щелкните здесь ):

If you additionally want to remove the whitespaces shown in the image, you could use Bootstrap столбцы карты вот так:

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

Результат выглядит так:

You can find the running fiddle здесь .

Если вы используете Bootstrap 3, посмотрите эту статью на Medium .

Удачи!