如何在物化中使用卡片每行显示 3 列答案

【问题标题】：How to display in 3 columns per row using cards in materialize如何在物化中使用卡片每行显示 3 列
【发布时间】：2019-03-29 00:07:04
【问题描述】：

它在一列中显示卡片，而不是中等大小的三列。

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

【问题讨论】：

标签： php materialize

【解决方案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 } } ?>

【讨论】：

【解决方案2】：

你可以检查物化网格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>

【讨论】：

【解决方案3】：

你忘记了行类末尾的引号：class="row>

【讨论】：