当我在 php 上做 foreach 时，如何让卡片添加到一边？

Question

Card looks like this. i just want it to display to the side

我试图在 PHP codeigniter 中显示我的数据库中的数据。数据显示很好。但问题是该卡正在向下而不是向右。你可以看看上面的图片。

我只是想让卡片在我做 foreach 时向右移动。并在 4/5 卡后走下坡路。

我尝试移动 foreach 代码，但它看起来就像那样。 我正在使用 bootsrap 4

这是代码

<div class="row">
        <div class="container">
            <div class="card-body">
                <?php
                    foreach ($user as $u) {?>
                <div class="col-md-2 mt-4">
                    <div class="card mt-3" style="width:15rem;">
                        <img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"
                            class="card-img-top img-responsive" alt="...">
                        <h5 class="card-title font-weight-bold  "><?php echo $u->nama_game; ?></h5>
                        <p class="card-text"><?=$u->deskripsi_game;?></p>
                        <a href="<?=base_url() . 'assets/games/' . $u->link_game;?>"
                            class="btn btn-primary btn-block">Mainkan Game</a>
                    </div>
                </div>
            </div>
            <?php }?>
        </div>
    </div>

Answer 1

您当前正在重复行内的整个容器，但您想重复容器内的列。

试试这个（循环col-md-2）：

<div class="row">

        <div class="container">
            <div class="card-body">
     <?php
foreach ($user as $u) {?>
                <div class="col-md-2 mt-4">
                    <div class="card mt-3" style="width:15rem;">
                        <img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"
                            class="card-img-top img-responsive" alt="...">
                        <h5 class="card-title font-weight-bold  "><?php echo $u->nama_game; ?></h5>
                        <p class="card-text"><?=$u->deskripsi_game;?></p>
                        <a href="<?=base_url() . 'assets/games/' . $u->link_game;?>"
                            class="btn btn-primary btn-block">Mainkan Game</a>

                    </div>

                </div>
            </div>
 <?php }?>
        </div>

    </div>

    </div>

编辑： 您的 HTML 结构有点混乱。 尝试这个。 col-md-3 在行内放置 4 个列，或者 col-md-2如果你想在行内放置 6 个列。一行最多 12 列 bootstrap grid documentation

<div class="container">
  <div class="row">

  <?php foreach ($user as $u) {?>
  <!-- col-md-2  -->
    <div class="col-md-4 mt-4">
      <div class="card">
        <div class="card-body">
           <img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"class="card-img-top img-responsive" alt="...">
           <h5 class="card-title font-weight-bold  "><?php echo $u->nama_game; ?></h5>
           <p class="card-text"><?=$u->deskripsi_game;?></p>
           <a href="<?=base_url() . 'assets/games/' . $u->link_game;?>" class="btn btn-primary btn-block">Mainkan Game</a>
        </div>
      </div>
    </div>
    <!-- col-md-2 end -->
    <?php }?>

  </div>
</div>