Question

感谢您查看我的问题。

我试图让PHP每3列只打印一行，有点像网格。我添加了这个逻辑，如果i是0，它将打印出行，但我没有得到正确的bootstrap Scaffolding。

如果只有3个cols，那么没有Row围绕它，如果有超过3个cols在行中，而其他cols不在。

以下是代码（BTW这是一个WordPress循环）：

$loop = new WP_Query($args);

  if ( $loop->have_posts() ) { ?>
    <section class="our_attorney our_attorney_style_two container">
    <?php
    $i=0;
    while ( $loop->have_posts() ) {
      $loop->the_post();
        $lp = (( ++$i % 3 == 0 ) ? true : false );
        if($lp){echo '<div class="row">';}
      ?>

     <div class="item col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="attorney_member">
        <div class="img_holder">
          <img src="<?php the_field('field_1'); ?>" alt="images" class="img-responsive">
          <div class="opacity transition3s">
            <div class="info">
              <a href="#">
                <h4><?php the_field('field_2'); ?></h4>
                <span><?php the_field("field_3"); ?></span>
              </a>
            </div> <!-- End .info -->
          </div> <!-- End /opacity -->
        </div> <!-- /img_holder -->
      </div> <!-- /attorney_member -->
    </div>

  <?php
    if($lp){echo '</div>'; }
  ?>

<?php
      } // end while
   } // end if
 ?>
 </section>

以下是HTML输出，如果它们是4列：

<section>
  <div class="item col-lg-4 col-md-6 col-sm-6 col-xs-12">...Content</div>
  <div class="item col-lg-4 col-md-6 col-sm-6 col-xs-12">...Content</div>
  <div class="row">
   <div class="item col-lg-4 col-md-6 col-sm-6 col-xs-12">...Content</div>
  </div>
  <div class="item col-lg-4 col-md-6 col-sm-6 col-xs-12">...Content</div>
</section>

正如你可以看到除了第3列以外的所有cols都不在行中，我真的需要一些帮助来理解如何实现脚手架，我在这里搜索了Stack溢出但没有工作的解决方案..也许它是因为它的WordPress代码？

请帮助！

Answer 1

检查一下，我已经创建了一个简单的例子供您理解。

<?php
$days = array( 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' );

echo '<div class="row">';
$i = 1;
foreach ($days as $day) {

    echo $day .', ';

    if ($i % 3 == 0) {
        echo '</div><div class="row">';
    }

    $i++;
}
echo '</div>';
?>

输出

<div class="row">sunday, monday, tuesday, </div>
<div class="row">wednesday, thursday, friday, </div>
<div class="row">saturday, </div>

Answer 2

如果您希望在一行中包含具有所需网格宽度的3列，请使用此代码：

tin=(.*?)[$&]

Bootstrap网格非常简单 - 列在行中，行在容器中：

<?php
$i = 0;
while (have_posts()) : the_post();

  if($i % 3 == 0) {
    echo '<div class="row">';
  }
  ?>

  <div class="item col-lg-4 col-md-6 col-sm-6 col-xs-12">...Content</div>

  <?php
  if((($i+1) % 3) == 0) {
  echo '</div>';
  }
  $i++;
endwhile;
?>

</section>

我如何获得这个引导程序Row＆amp;在PHP中的Col脚手架？

2 个答案: