当我将所有图像都设置为col-6时，为什么我的图像彼此位于较低的位置？

Question

I don't know why my images get positioned below each other even though they are inside a col-6 Bootstrap div. I want them to be next to each other, not below. Code, in case it's unreadable in the text below: https://imgur.com/S6tSXng

Page: https://imgur.com/7FZl2lM

I have already tried putting the col-6 inside the foreach block, but it only made the second image smaller. I don't know what else to try.

<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;?>

Well, I expect the images to be next to each other like they should be not below.

Answer 1

在col-6中进行foreach。

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

Answer 2

<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 3

Actually your images are placed into one "col-6" you have to create one for each images, like this:

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

Quick exemple of what you could use to make it work :

<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;?>

I recommend you to read more about Bootstrap's Grid system: https://getbootstrap.com/docs/4.0/layout/grid/