可變heigth COL-SM-4格上引導

在我的網頁我有三列和多行顯示以下內容可變heigth COL-SM-4格上引導

<div class="col-sm-4"> 
<img src="<?php echo $myURL; ?>" class="img-responsive img-thumbnail"> 
<p class="lead"><?php echo $mytext; ?></p> 
</div>

顯示的是完美的，當所有的$ mytext的內容是相同的尺寸（行數）。但是，如果在一行中元素A和B有兩行$ mytext並且元素C有三行，則下一行中的元素C將不會顯示。

我該如何預防？理想情況下，行高應該是行中三個元素高度的最高值。

編輯：如果你去http://bit.ly/1HfHiqC並減少窗口的寬度，你會看到我在說什麼。

來源

2015-05-19 Arturo

你有任何示例代碼或鏈接到您的網站。你的意思是什麼，它沒有顯示，它是落入一個新的行或完全消失？ – brance

作爲編輯添加 – Arturo

哦，這是問題，很好地告訴你解決方案，你是用循環生成代碼，還是你一個一個地加一個代碼？ – brance

如果生成一個循環的內容，可以說這樣的

foreach ($posts as $post) { 
    echo '<div class="col-sm-4">'; 
    ... 
}

，那麼你需要設置一個counter到clearfix類添加到每個col-n * x = 12 DIV，以清除浮動。在你的例子中，你有n = 4，這意味着你必須在每次迭代中清除它。總結一下，當你的row已滿時，下一行以一組新的cols開頭，你必須向該行的第一個div添加一個類。

$clearfix = 0; 
foreach ($posts as $post) { 
    if ($clearfix % 3 == 0) { $clear_class = "clearfix"; } else { $clearfix = ""; } 
    echo '<div class="col-sm-4 '.$clear_class.'">'; 
... 
    $clearfix++; 
}

而且在你的CSS你會添加以下

.clearfix { clear: both; }

這應該解決您的問題。

來源

2015-05-19 22:35:53 brance

可變heigth COL-SM-4格上引導

回答

相關問題