當我將所有圖像都設置為col-6時，為什么我的圖像彼此位於較低的位置？

Question

我不知道為什么即使我的圖像都位於col-6 Bootstrap div中，它們也為何彼此位於下方。 我希望他們彼此相鄰，而不是下方。 代碼，以防下面的文本不可讀： 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

在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

實際上，您的圖像放置在一個“ col-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/