Как отобразить по 3 столбца в строке, используя карточки в материализации

Question

Отображает карточки в одном столбце вместо трех в средних размерах.

Я пробовал базовый макет в HTML, и он отлично работает.

echo '<div class="row>';

        if($res->num_rows > 0){
            while($row = $res->fetch_assoc()){
                echo  '<div class="col s12 m4">' .
                        '<div class="card">' .
                          '<div class="card-content">' .
                            '<span class="card-title">' . $row["Kanji"]             .   '</span>' .
                            $row["Onyomi"]. '   ' . $row["Kunyomi"] .
                          '</div>' . 
                          '<div class="card-action">' .'<p>' . $row["English"] . '</p>' . '</div>' . 
                        '</div>'.
                      '</div>';
            }
        }
        echo '</div>';

Answer 1

Я сделал это задом наперед.

Вот что сработало.

<div class="row">  
      <?php if($res->num_rows > 0){
            while($row = $res->fetch_assoc()){
      ?>

        <div class="col s12 m4">
          <div class="card">
            <div class="card-content">
              <span class="card-title"><?php echo $row["Kanji"] ?></span>
              <p><?php echo $row["Onyomi"]; echo $row["Kunyomi"] ?></p>
            </div>

            <div class="card-action">
              <?php echo $row["English"] ?>
            </div>
          </div>
        </div>  

      <?php } } ?>

Answer 2

вы забыли кавычки в конце строки: class = "row>

Answer 3

вы можете проверить материализованную сетку https://materializecss.com/grid.html

Используя материализованную сетку, вы можете поставить нужные столбцы.

Один пример для 3 столбцов подряд

<div class="row">
  <div class="col s4">Column 1</div>
  <div class="col s4">Column 2</div>
  <div class="col s4">Column 3</div>
</div>