Bootstrap row height change with individual div

Bootstrap container has row s with col-lg-3 class。從具有不同長度文本的SQL查詢返回超過100篇文章。每篇文章（數字1,2,3等）分別放在<div>標籤上。但我的輸出如下：Bootstrap row height change with individual div

，但我需要

HTML與PHP代碼

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

來源

2016-02-06 Geeth Welagedara

您需要更改數據的結構 - 像這將工作：

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

來源

2016-02-06 10:49:24 IaMaCuP

其作品完美!!!! –

兩種可能的方法來解決它 1.你需要經過4 col-lg-3 or col-md-3容器內封閉每個<div class="row">，因爲COL-LG-3/COL-MD-3具有動態的高度和第5列將堆到最高的塔因爲它不能清除：因爲最高的列的高度而留下。 2.使用jQuery Isotope或任何類似的插件。

來源

2016-02-06 10:53:53 Kcoitk

您將擁有4個col-md-3，其中包含儘可能多的col-md-12（第1,5,9條......第二條，第六條，第十條......）等）

<div class="col-md-3"> # $i % 4 === 1 
<div class="col-md-12"><p>Article 1</p></div> 
<div class="col-md-12"><p>Article 5</p></div> 
... 
</div> 
<div class="col-md-3"> # $i % 4 === 2 
<div class="col-md-12"><p>Article 2</p></div> 
<div class="col-md-12"><p>Article 6</p></div> 
... 
</div> 
<div class="col-md-3"> # $i % 4 === 3 
<div class="col-md-12"><p>Article 3</p></div> 
<div class="col-md-12"><p>Article 7</p></div> 
... 
</div> 
<div class="col-md-3"> # $i % 4 === 0 
<div class="col-md-12"><p>Article 4</p></div> 
<div class="col-md-12"><p>Article 8</p></div> 
... 
</div>

這應該工作：

<div class="container" > 
<div class="row"> 
    <?php 
     $i=0; 
     $col1="<div class='col-md-3'>"; 
     $col2="<div class='col-md-3'>"; 
     $col3="<div class='col-md-3'>"; 
     $col4="<div class='col-md-3'>"; 
     foreach ($value as $add) { 
      if($i % 4 === 1) { 
      $col1 = $col1 ."<div class='col-md-12'><p>".$add->article_item."</p></div>"; 
      } 
      if($i % 4 === 2) { 
      $col2 = $col2 ."<div class='col-md-12'><p>".$add->article_item."</p></div>"; 
      } 
      if($i % 4 === 3) { 
      $col3 = $col3 ."<div class='col-md-12'><p>".$add->article_item."</p></div>"; 
      } 
      if($i % 4 === 0) { 
      $col4 = $col4 ."<div class='col-md-12'><p>".$add->article_item."</p></div>"; 
      } 
      $i++; 
     } 
     $col1 = $col1 . "</div>"; 
     $col2 = $col2 . "</div>"; 
     $col3 = $col3 . "</div>"; 
     $col4 = $col4 . "</div>"; 
     echo $col1 . $col2 . $col3 . $col4; 
    ?> 
</div>

首先，我們初始化我們的4列。然後，對於每第四個元素（模），我們在右列中添加一個col-md-12中包含的文章。然後，你關閉div然後回顯它們。

來源

2016-02-06 11:00:25 tomsihap

這是勉強相同@IaMaCuP的溶液（使用一個陣列，該其他使用字符串，都使用模數來重新排序數據結構）。不過他可能會更清楚！ – tomsihap

請上面的代碼替換此代碼

<div class="row"> 
 
    <?php 
 

 
     for($i=0;$i<count($value);$i++) { 
 

 
\t \t if($i%4==0 && $i!=0) 
 
\t \t { 
 
echo "</div><div class='row'>"; 
 
} 
 

 

 
     echo "<div class='col-md-3'><p>"; 
 
    \t echo $value[$i];  // column name is article_item 
 
     echo "</p></div>"; 
 
\t 
 
} 
 
    ?> 
 
</div>

來源

2016-02-06 11:23:27

Bootstrap row height change with individual div

回答

相關問題