为什么当我把所有的图像都设置为col-6时，我的图像被放置在彼此下面？

Question

我不知道为什么我的图像被放置在彼此下面，即使它们是在一个-6启动带div内。我希望他们在一起，而不是在下面。代码，以防它在下面的文本中不可读：https://imgur.com/S6tSXng

页面：https://imgur.com/7FZl2lM

我已经试过把头6放在前轮块内，但它只使第二张图像变小了。我不知道还能尝试什么。

<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

从第六号开始。

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

实际上，您的图像被放置在一个“头-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;?>

我建议您阅读更多关于Bootstrap的网格系统：https://getbootstrap.com/docs/4.0/layout/grid/