2016-10-08 5 views
0

私の質問を見てくれてありがとう。PHPでこのブートストラップRow&Colスキャフォールディングを取得するにはどうすればよいですか?

私は3列ごとに行を印刷するようにしようとしています、グリッドのようなものです。私はこの論理を追加しました。もしiが0であれば、それは行を印刷しますが、私は正しいブートストラップ足場を取得しません。

3列しかない場合は、それを囲む行はありません。3以上の列がある場合は列にいくつかの列があり、それ以外の列がない場合です。

は、ここで(ちなみにこれは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> 

彼らは4つのcolsのあるしている場合、ここではHTML出力があります:あなたが見ることができるように

<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番目を除くすべての列が行から外れている、私は実際に足場を達成する方法を理解するためにいくつかの助けが必要です、私はここでスタックオーバーフローのソリューションを検索したが、何も仕事..それはワードプレスcですオデ?

Please HELP!

答えて

0

これを確認して、わかりやすい例を作成しました。

<?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> 
0

使用しますが、3列、ご希望のグリッド幅を一列にしたい場合は、このコードは次のようになります。

<?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> 

ブートストラップグリッドは非常に簡単です - 列は行内にあり、行はコンテナ内にあります。

<div class="container"> 
    <div class="row"> 
    <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="item col-lg-4 col-md-6 col-sm-6 col-xs-12">...Content</div> 
    </div> 
    <div class="row"> 
    <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="item col-lg-4 col-md-6 col-sm-6 col-xs-12">...Content</div> 
    </div> 
</div> 
関連する問題