我正在尝试实现网格布局,以便在旋转木马滑块上可以看到帖子。每张幻灯片由8根立柱组成。每行4个立柱。
我也在使用bootstrap。
我希望html看起来像:
<div class="slider_container">
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 1</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 2</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 3</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 4</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 5</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 6</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 7</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 8</h4>
</div>
</div>
</div>
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 9</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 10</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 11</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 12</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 13</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 14</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 15</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 16</h4>
</div>
</div>
</div>
</div>
这是我的代码,但它不起作用。<div class="slider_container">
<?php
ob_start();
$args = array( \'post_type\' => \'services\',\'posts_per_page\' =>-1,\'order\' => \'ASC\');
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
$i = 0;
$o = 0;
?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="services-slide">
<div class="row">
<?php if ($i == 4) { $i = 0; ?>
</div>
<div class="row">
<?php } ?>
<div class="col-md-3">
<div class="box-desc">
<h4><?php echo get_the_title(); ?></h4>
</div>
</div>
</div>
<?php $i++; ?>
</div>
<?php endwhile; ?>
<?php
endif;
wp_reset_postdata();
$content = ob_get_contents();
ob_end_clean();
return $content; ?>
</div>
请帮忙。