Почему мои изображения располагаются ниже друг друга, когда я установил все их на col-6?

Question

Я не знаю, почему мои изображения располагаются друг под другом, даже если они находятся внутри div начальной загрузки col-6.Я хочу, чтобы они были рядом, а не внизу.Код, если он не читается в тексте ниже: https://imgur.com/S6tSXng

Страница: https://imgur.com/7FZl2lM

Я уже пытался поместить col-6 в блок foreach, но он только сделалвторое изображение меньше.Я не знаю, что еще попробовать.

<section id="listaoldal">
    <div class="container">
        <div class="row">
           <div class="col-6">
           <?php foreach ($characterDetails as $key):?>
           <img data-toggle="modal" data-target="#<?= $key['modal']?>"                              class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
           <?php endforeach;?>

Ну, я ожидаю, что изображения будут рядом друг с другом, как будто их не должно быть ниже.

Answer 1

<section id="listaoldal">
    <div class="container">
        <div class="row">
 <?php foreach ($characterDetails as $key):?>
           <div class="col-6">
           <img data-toggle="modal" data-target="#<?= $key['modal']?>"                              class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
           <?php endforeach;?>

Answer 2

На самом деле ваши изображения помещаются в один «столбец-6», вам нужно создать по одному для каждого изображения, например:

<div class="col-6">
    <img .../>
</div>
<div class="col-6">
    <img .../>
</div>
<div class="col-6">
    <img .../>
</div>
...

Быстрый пример того, что вы можете использовать, чтобы заставить его работать:

<section id="listaoldal">
    <div class="container">
      <div class="row">
        <?php foreach ($characterDetails as $key):?>
          <div class="col-6">
              <img data-toggle="modal" data-target="#<?= $key['modal']?>"                              class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
          </div>
        <?php endforeach;?>

Рекомендую прочитать больше о Grid-системе Bootstrap: https://getbootstrap.com/docs/4.0/layout/grid/

Answer 3

foreach из col-6.

<?php foreach ($characterDetails as $key):?> <div class="col-6"><img ... /></div> <?=endforeach?>