как заставить карту добавить в сторону, когда я делаю foreach на php?

Question

Карта выглядит следующим образом. я просто хочу, чтобы он отображался в сторону

Я пытаюсь показать данные из моей базы данных в PHP codeigniter. данные показывают хорошо. но проблема в том, что карта идет вниз вправо. Вы можете посмотреть на изображение выше.

Я просто хочу сделать карту go вправо, когда я делаю foreach. и go вниз после карты 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

вы в настоящее время повторяете весь контейнер внутри строки, но вы хотите повторить столбцы внутри контейнера.

Попробуйте это (l oop вместо 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 сетка документации

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