引导行的高度随单个div的变化 [英] Bootstrap row height change with individual div

问题描述

引导程序container具有row且具有col-lg-3类.从SQL查询返回的100多个文章使用不同的文本长度.每个文章(编号分别为1、2、3等)分别放在<div>标记上.但是我的输出如下:

Bootstrap container has rows with col-lg-3 class. Over 100 articles are returned from a SQL query with different length of text. Each article (numbers as 1, 2, 3 etc) put on <div> tag individually. But my output as follows:

但我需要

带有php代码的html

html with php code

<div class="container" >
<div class="row">
    <?php
        foreach ($value as $add) {
        echo "<div class='col-md-3'><p>";
        echo $add->article_item;   // column name is article_item
        echo "</p></div>";
    }
    ?>
</div>
</div>

推荐答案

您需要更改数据的结构-这样的方法将起作用:

You need to change the structure of the data - something like this will work:

<?php
  $articleContainer = array('', '', '', '');
  $count = 0;

  foreach($value as $add)
  {
    //this is called the Modulus operator if you have not seen it before
    switch ($count % 4) 
    {
      case 0:
          $articleContainer[0] .= '<p>'.$add->article_item.'</p>';
          break;
      case 1:
          $articleContainer[1] .= '<p>'.$add->article_item.'</p>';
          break;
      case 2:
          $articleContainer[2] .= '<p>'.$add->article_item.'</p>';
          break;
      case 3:
          $articleContainer[3] .= '<p>'.$add->article_item.'</p>';
          break;
      default:
          echo 'error';
    } 

    $count++;
  }
?>

<div class="container" >
<div class="row">
  <div class='col-md-3'>
    <?=$articleContainer[0]?>
  </div>
  <div class='col-md-3'>
    <?=$articleContainer[1]?>
  </div>
  <div class='col-md-3'>
    <?=$articleContainer[2]?>
  </div>
  <div class='col-md-3'>
    <?=$articleContainer[3]?>
  </div>
</div>
</div>

这篇关于引导行的高度随单个div的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！