php循环中的引导脚手架

【问题标题】：Bootstrap Scaffolding in php's loopphp循环中的引导脚手架
【发布时间】：2013-11-30 14:59:34
【问题描述】：

如果我想将网格彼此相邻显示，我该如何制作脚手架。我的实际代码

<div class="span8">
<div class="row-fluid">
<?php foreach($items as $item) : ?>
   <div class="span6">
      <?= $item ?>
   </div>
<?php endforeach; ?>
</div>
</div>

网格显示如下

-------------------
1box       2box
-------------------
3box
-------------------
4box
-------------------
5box
-------------------

我想展示

-------------------
1box       2box
-------------------
3box       4box
-------------------
5box
-------------------

【问题讨论】：

你需要为每两个项目输出一个row-fluid - Bootstrap 的网格应该只有每个row-fluid 有足够的元素来填充该行，否则边距会像你一样推动一切见过
是的，我试图整合到循环中，我认为这也是解决方案，但我仍在努力实现这一目标
@fefe 这是 Bojangles 在小提琴中的好答案，正朝着同样的方向前进 =) jsfiddle.net/L4CrK/1 （由于响应式样式表，您可能需要调整窗口大小以将其视为多列）

标签： php css twitter-bootstrap scaffolding

【解决方案1】：

   <div class="span8 mutli-column">
       <?php   
         $c = 0;
         foreach( $items as $item ):

            //Needs Break Boolean, true if counter at second column
            $b = (( ++$c % 2 == 0 ) ? true : false );

            if ( $b ) 
                echo '<div class="row-fluid">'; ?>

               <div class="span6">
                    <?php echo $item; ?>
               </div>

           <?php
            if ( $b ) 
                echo '</div>';

       endforeach; ?>
  </div>

使用 % Modulus，您可以计算每第二次迭代，从而分解成一个新的.row-fluid 行，让自己进入如下 HTML 结构：

<div class="span8 mutli-column">
    <div class="row-fluid">
        <div class="span6">1</div>
        <div class="span6">2</div>
    </div>
    <div class="row-fluid">
        <div class="span6">3</div>
        <div class="span6">4</div>
    </div>
    <div class="row-fluid">
        <div class="span6">5</div>
        <div class="span6">6</div>
    </div>
    <div class="row-fluid">
        <div class="span6">7</div>
        <div class="span6">8</div>
    </div>
</div>

这是一个由上述构造的 Fiddle：

【讨论】：

非常感谢这个方法。布尔值有一个小问题，但我自己解决了
对不起！我也认为是因为我错误地输入了$c++ 而不是++$c！变了！ =)

【解决方案2】：

也许这不是最好的解决方案，但可以帮助您解决问题。注意我没有测试这个代码。所以，看看想法。

<div class="span12">
<?php
$i = 0;
foreach($items as $item) :
    if ($i == 0) echo '<div class="row-fluid">';
?>
    <div class="span6">
    <?= $item ?>
    <?php
    if ($i == 1) echo '</div>';
    $i = 1 - $i;
    ?>
<?php endforeach; ?>
<?php if ($i == 0) echo '</div>'; ?>
</div>

【讨论】：

在某些服务器上可以禁用速记 php 标签。

【解决方案3】：

引导程序 2：

<div class="row-fluid">

<?php foreach ($items as $i => $item) : ?>
  <?php if ($i && $i % 2 == 0) : ?>
    </div><!-- /.row-fluid -->
    <div class="row-fluid">
  <?php endif; ?>

  <div class="span6">
    <?php echo $item; ?>
  </div>

<?php endforeach; ?>

</div><!-- /.row-fluid -->

引导程序 3：

<div class="row">

<?php foreach ($items as $i => $item) : ?>
  <?php if ($i && $i % 2 == 0) : ?>
    </div><!-- /.row -->
    <div class="row">
  <?php endif; ?>

  <div class="col-sm-6">
    <?php echo $item; ?>
  </div>
<?php endforeach; ?>

</div><!-- /.row -->

【讨论】：

【解决方案4】：

使用此代码：

.row-fluid [class*="span"]:nth-child(3n+1) {
   margin-left: 0;
}

【讨论】：

【解决方案5】：

更新：我自己的非常简单但有效的帖子循环解决方案在两列中（例如在引导程序中） - 来自特定类别 ID 的帖子

/对不起我的英语不好:) /

<div class="row-fluid">

            <?php
            $divCounter = 0;
            $postCounter = 1;

            $temp = $wp_query;
            $wp_query = null;
            $wp_query = new WP_Query();
            $wp_query->query('showposts=10&cat=2'.'&paged='.$paged);
            if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

            <!-- starting the loop -->
            <div class="span6">

                <p><?php the_title(); ?></p>

                <div class="row-fluid">
                    <div class="span5">
                        <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>
                        <p><img src="<?php echo $url; ?>" /></p>
                    </div>
                    <div class="span7">
                        <?php the_excerpt(); ?>
                        <p><a class="btn" href="<?php the_permalink(); ?>">more &raquo;</a></p>
                    </div>
                </div>

            </div>

            <?php
            $allposts = $wp_query->post_count; //counting all posts in category
            $divCounter++; //divCounter states is: 1 or 2
            if ($divCounter == 2 && $postCounter < $allposts) { 
            // if we are on the second Span and our postCounter is smaller then allposts then we close the second Span and open a new Row 
            // so we close the second Span and open a new Row only when we have min. one post left and when we are on the second Span - else we write the last closing tag: </div> <!-- the last row -->
                echo '</div><div class="row-fluid">';
            $divCounter = 0; //reseting divCounter
            }

            if ($postCounter == $allposts) { //when the postCounter reach allposts then we closing the row - for example if you have only 1 post in category or in page2 (pagenation)
            echo '</div> <!-- the last row -->';
            }
            $postCounter++;
            ?>

            <!-- loop end -->
            <?php endwhile; ?>

【讨论】：

你能添加一些文字来解释你的解决方案以及它是如何解决问题的吗？

【解决方案6】：

在尝试了许多不同的答案后，我成功完成了引导程序 class="row" and class="col-md-6" divs 的动态生成。这里我使用了 php，但这可以通过任何其他服务器端脚本语言来实现。

<div class="container">
   <div class="row-fluid">  
  <?php 
      $c = 0;
      foreach( $items as $item ):
     $c++;
     // Closing PHP tag follows
     ?>
               <div class="col-md-6">
                    <?php echo $item; ?>
               </div>

     <?php
     if($c % 2 == 0) echo '</div><div class="row-fluid">'; 
   endforeach; ?>

  </div>

生成以下 HTML 代码：

<div class="span8 mutli-column">
    <div class="row-fluid">
        <div class="col-md-6">1</div>
        <div class="col-md-6">2</div>
    </div>
    <div class="row-fluid">
        <div class="col-md-6">3</div>
        <div class="col-md-6">4</div>
    </div>
    ....
</div>

【讨论】：