如何根据计数为Foreach循环中的列自动添加bootstrap 4 Order-LG-1和Order-LG-2类？

时间：2020-07-02 作者：Farhan Dharsi

如何自动添加引导4order-lg-1 and order-lg-2 基于计数的foreach循环中列的类？

PHP and Html Code

<?php
    //get your custom posts ids as an array
    $howtoplaycontent_args = get_posts(array(
            \'post_type\'   => \'howtoplaycontent\',
            \'post_status\' => \'publish\',
            \'posts_per_page\' => -1,
            \'fields\' => \'ids\'
        )
    );
    //loop over each post
    foreach($howtoplaycontent_args as $p){
        //get the meta you need form each post
        $howtoplaycontent = get_post_meta($p, \'howtoplaycontent\', true );
    }

?>

 <?php
 $count = 0;
 foreach ($howtoplaycontent as $hpc)
 {
 $count ++;

 if($count == 1) {?>
 
 <div class="row courses_row" style="background-color: #f8f8f8">
 
   <div class="container">
        <div class="row" style="padding: 15px;">
          <div class="col-lg-6 course_col order-lg-1">
          </div>
          
          <div class="col-lg-6 course_col order-lg-2">
          </div>
          
          
        </div>
 
 </div>
 
 
 <?php } ?>
 
 <?php if($count == 2) {?>
 
 <div class="row courses_row" style="background-color: #f8f8f8">
 
   <div class="container">
        <div class="row" style="padding: 15px;">
          <div class="col-lg-6 course_col order-lg-2">
          </div>
          
          <div class="col-lg-6 course_col order-lg-1">
          </div>
          
          
        </div>
 
 </div>
 
 
 <?php } ?>

Example Design

enter image description here

1 个回复
SO网友:Ivan Shatsky

您应该使用PHPmodulo operator 为此。由于您需要两种不同的布局，您应该根据$count % 2 和($count + 1) % 2:

<?php
$count = 0;
foreach ($howtoplaycontent as $hpc): ?>
<div class="row courses_row" style="background-color: #f8f8f8">
    <div class="container">
        <div class="row" style="padding: 15px;">
            <div class="col-lg-6 course_col order-lg-<?php echo $count % 2 + 1; ?>">
            </div>
          
            <div class="col-lg-6 course_col order-lg-<?php echo ($count + 1) % 2 + 1; ?>">
            </div>
        </div>
    </div>
</div>
<?php $count ++;
endforeach; ?>

Update

由于偶数行和奇数行需要不同的背景色，我建议您在CSS中定义两个额外的类：

.row.courses_row.odd_row {
    background-color: #f8f8f8;
}
.row.courses_row.even_row {
    background-color: #ffffff;
}
然后使用以下代码：

<?php
$count = 0;
foreach ($howtoplaycontent as $hpc): ?>
<div class="row courses_row <?php echo $count % 2 ? \'even\' : \'odd\'; ?>_row">
    <div class="container">
        <div class="row" style="padding: 15px;">
            <div class="col-lg-6 course_col order-lg-<?php echo $count % 2 + 1; ?>">
            </div>
          
            <div class="col-lg-6 course_col order-lg-<?php echo ($count + 1) % 2 + 1; ?>">
            </div>
        </div>
    </div>
</div>
<?php $count ++;
endforeach; ?>

标签： posts   customization   loop   twitter-bootstrap   小码农  

相关推荐

Undeletable column in Posts

我的网站上发生了一些奇怪的事情。我在帖子里有一个栏目叫做post_views 它不是由任何插件创建的，也是不可删除的。我尝试在数据库中搜索列名，但未找到任何结果。我也尝试过逐个禁用插件和主题，但它仍然存在。我也试过用manage_posts_columns 钩子和它不起作用。add_filter(\'manage_posts_columns\', array($this, \'remove_columns\')); function remove_columns($columns) {&