загрузите 4 карты с помощью php foreach loop - PullRequest
Новая
       14

загрузите 4 карты с помощью php foreach loop

0 голосов
/ 13 декабря 2018

Я пытаюсь заставить мою веб-страницу отображать все элементы магазина в начальной загрузке 4 карт.3 ширины, сколько глубины (я могу добавить нумерацию страниц в другой день)

У меня есть цикл php foreach, который идеально заполняет карты bootstrap4.Проблема в том, что они отображаются вертикально (один поверх другого).я попробовал class = columns, который работает на фиктивных div, но не когда я интегрирую с моим для каждого цикла.

Я перепробовал все, что касается загрузочных документов, но не могу заставить карты отображать 3 ширины и сколько угодно глубины (foreach и элементы управляют этим.)

Должен ли я даже использовать «карты»или использовать что-то еще.спасибо за ваше время 

    <div class="container">


    <!-- my php code which uses x-path to get results from xml query. -->
<?php 
    foreach ( $result as $elements){
  ?>



       <div class="row-fluid ">
    <div class="col-sm-4 ">
<div class="card-columns-fluid">

    <div class="card  bg-light" style = "width: 22rem; " >

      <img class="card-img-top"  src=" <?php echo $elements->pictures->picture[2]->filename  ; ?> " alt="Card image cap">

      <div class="card-body">
        <h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
         <p class="card-text"><b><?php echo $elements->price_text ?></b></p>
        <p class="card-text"><?php echo $elements->bullet1 ?></p>
        <p class="card-text"><?php echo $elements->bullet2 ?></p>
        <a href="#" class="btn btn-secondary">Full Details</a>

     </div></div></div></div>

    <?php
        }
      }
    ?>

    </div> <!--container div  -->
     </div>

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Как указано, жидкость .row должна находиться за пределами петли: 

<div class="container">
    <div class="row-fluid ">
    <!-- my php code which uses x-path to get results from xml query. -->
    <?php foreach ( $result as $elements) : ?>
        <div class="col-sm-4 ">
            <div class="card-columns-fluid">
                <div class="card  bg-light" style = "width: 22rem; " >
                    <img class="card-img-top"  src=" <?php echo $elements->pictures->picture[2]->filename  ; ?> " alt="Card image cap">

                    <div class="card-body">
                        <h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
                        <p class="card-text"><b><?php echo $elements->price_text ?></b></p>
                        <p class="card-text"><?php echo $elements->bullet1 ?></p>
                        <p class="card-text"><?php echo $elements->bullet2 ?></p>
                        <a href="#" class="btn btn-secondary">Full Details</a>
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
    </div>
</div> <!--container div  -->
0 голосов
/ 13 декабря 2018

Вам необходимо переместить ваш класс <div class="row-fluid "> за пределы цикла foreach, иначе он создаст новую строку для каждого класса.

Кроме того, как уже упоминалось в комментарии, вам необходимо закрыть все свои элементы divправильно.

...