php - Twitter Bootstrap 3.0 专栏

Question

我正在使用 Twitter Boostrap 3 作为我的前端的基础，我在使用网格列时遇到了一个问题，我不确定如何解决。

我正在使用 PHP 中的循环打印一个提要，并且对于我正在回显的每个提要：

<? foreach($feed as $post) { ?>
    <div class='col-lg-6'>
        <?= $post ?>
    </div>
<? } ?>

这很好用，除非我的帖子比以前的帖子长或继续它的帖子长。这会导致在我最左列的帖子之间放置一堆空白，因为我的右列将下一行向下推。有没有办法解决这个问题，所以我总是可以让我的列和行一个接一个地排成一行？

Answer 1

对于列表和网格，您应该使用引导缩略图而不是重复 col-md-6。在这里查看缩略图

使用此代码：

<div class="row">
 <? foreach($feed as $post) { ?>
  <div class="col-xs-6 col-md-6">
   <div class="thumbnail">
    <?= $post ?>
   </div>
 </div>
<? } ?>
</div>

Answer 2

<?
$posts=0;
$colums=array();
foreach($feed as $post) 
{ 
$colums[$posts%2] .= '<div>'.$post.'</div>';
$posts++;
} 
?>
<div class='col-lg-6'>
   <?=$colums[0]?>  
</div>
<div class='col-lg-6'>
   <?=$colums[1]?>   
</div>
<?