Question

我不知道为什么我的图像即使位于col-6 Bootstrap div内也为何彼此位于下方。我希望他们彼此相邻，而不是下方。代码，以防下面的文本不可读：https://imgur.com/S6tSXng

我已经尝试过将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

在第6列中进行搜索。

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

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

3 个答案: