Question

POST更新：

在我的全部和某些网页中，我使用col-xx-xx将帖子分为col-md-6之类的单列，当我使用此选项将帖子分成下一列时，例如，可能为空：

所有col-md-6列都在一个row中，而不是一行中的两列

现在我的问题是：我如何填充只有col-md-6的一列，或者如何将col-md-12的class设置为div以将其填充到当前行？

伪代码：

<div class="row" style="padding: 20px;">
    <?php
    $row = 1;
    $col = 6;
    ?>
    @foreach ($webDevelopmentArticles as $articles)
        @foreach ($articles as $article)
            <?php
            if ($row % 2 == 0)
                $col = 6;
            else
                $col = 12;
            $row ++;
            ?>
            <div class="col-sm-12 col-md-{{$col}} col-lg-{{$col}} pull-right">

Answer 1

抵销可以帮助您解决问题。 col-md-offset-6

更新：既然已经完全理解了您的问题，那么您需要一个逻辑来检查该行是否将是最后一行，如果是，则我们需要检查该行是否为奇数行，以便将其放在col-md-12上。这是代码：

<?php
       @foreach ($articles as $index => $article)
            // if its the last row and its odd number
            if ($index % 2 == 0 && count($articles) === ($index+1))
                $col = 12;
            else
                $col = 6;
            ?>

此代码未经测试，而且我有一段时间没有使用PHP进行编码了。但是我相信这应该可行。

Answer 2

在这种情况下，我假设您有一个二维数组，如下所示。

<?PHP
   $webDevelopmentArticles = 
   Array(
         'row1'=>array('article1','article2'),
         'row2'=>array('article3')
   );
?>

因此，文章应填充整行而不是共享。还假设每个嵌套数组的最大长度为2。

然后我要编写的代码将如下所示

<?PHP foreach ($webDevelopmentArticles as $articles):
     $col=6;
     if(count($articles)==1){
        $col=12;
     } 
  ?>
   <div class="row" style="padding: 20px;">
     <?PHP foreach ($articles as $article):?>
        <div class="col-md-<?PHP echo $col?>">
          <?PHP echo $article;?>
        </div>
     <?PHP endforeach;?>
   </div>
<?PHP endforeach;?>

Bootstrap设置列全宽（如果它是一行中的唯一列）

2 个答案: