1

使用PHP,我輸出一組來自MySQL數據庫的結果。每個結果(while row fetch array)應顯示在專用的Twitter Bootstrap列(col-md-4,或col-md-3,無論如何)中。根據每列單元格的內容調整Twitter Bootstrap 3.1.1列行高度

<div class="container"> 
<div class="row"> 
<?php 
$sql = "SELECT * FROM ....."; 
$query = mysqli_query($connect, $sql) or die (mysqli_error()); 
while ($row = mysqli_fetch_array($query)) { 
$content = $row["content"]; 
// output 
echo '<div class="col-md-3">'; 
echo $content; 
echo '</div>'; 
} 
?> 
</div> 
</div> 

但是,由於我有很多結果,創建了許多列,很不幸,Bootstrap並未正確對齊。所以,如果我有6個結果分成6 COL-MD-3,一個新行前3個結果(顯然)後,「創造」的引導,但他們都相當搞砸:

|| Content1 || Content2 || Content3 || 
|| Content1 || Content2 || Content3 || 
|| Content1 || Content2 || -------- 
|| Content1 || -------- Content6 || 
    -------- Content5 || Content6 || 
|| Content4 || Content5 || Content6 || 
|| Content4 || Content5 || Content6 || 
|| Content4 || Content5 || 
|| Content4 || 

我是什麼尋找是這樣的:根據每個結果長度調整行高或列高度,但分別調整每行。它需要3列,4,6,等工作:

|| Content1 || Content2 || Content3 || 
|| Content1 || Content2 || Content3 || 
|| Content1 || Content2 || ------- 
|| Content1 || 
    -------- -------- -------- 
|| Content4 || Content5 || Content6 || 
      || Content5 || 
      || Content5 || 
    -------- -------- -------- 
|| Content7 || Content8 || Content9 || 
    -------- -------- -------- 

我需要什麼,在Twitter的引導3.1.1 CSS改變?我試過顯示器:table-cell;方法在其他職位的建議,但只有弄亂它更多的(它增加了所有colums注入源源不斷的水平行)

+0

這可能會幫助你http://stackoverflow.com/questions/19819816/bootstrap-3-trying-to-create -columns與 - 相等的高度 – qnguyen

回答

0
<?php 
$sql = "SELECT * FROM ....."; 
$query = mysqli_query($connect, $sql) or die (mysqli_error()); 
while ($row = mysqli_fetch_array($query)) { 
$content = $row["content"]; 
// output 
echo '<div class="col-md-3">'; 
echo $content; 
echo '</div>'; 
} 
?> 

<?php 
    $sql = "SELECT * FROM ....."; 
    $query = mysqli_query($connect, $sql) or die (mysqli_error()); 
    $count = 1; 

    while ($row = mysqli_fetch_array($query)) { 
     $content = $row["content"]; 
     // output 

     if ($count % 3 == 1) { 

      echo '<row>'; 

     } 

     echo '<div class="col-md-4">'; 
     echo $content; 
     echo '</div>'; 

     $count = $count + 1; 

     if ($count % 3 == 0) { 

      echo '</row> 

     } 


    } 
?> 

這可能不是得到它的最好辦法完成但它應該工作。

基本上if語句在那裏,所以當計數達到任何餘數爲1。像7,10,13等將啓動新行,然後一旦數字完全被3整除,則它將關閉該行。

所以元素0 - 3將在1排4 - 7在另一個等

相關問題