我正在创建一个主题
,在创建了 3 个帖子/列之后,我使用了一个条件来创建一个带有“行”类的附加 div
。它按预期工作,除了当我将屏幕最小化为 1024x768
时,列之间没有边距。然后它们最终在较小的 viewport
上如预期的那样一个接一个地显示。不知道该怎么做,这是代码...
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="row ">
<?php
if (have_posts() ):
$counter = 0;
while (have_posts() ) : the_post();
$counter++; ?>
<div class="col-sm-4">
<div class="card">
<div class="card_img_container">
<?php the_post_thumbnail( array(450, 450), array('alt' => get_the_title(), 'class' => 'card_image img-responsive') ); ?>
<span class="card_readmore">View Post</span>
</div>
<div class="card_excerpt">
<p class="content_category1"> <?php the_category( ', ' ); ?></p>
<?php the_excerpt(); ?>
<p> <a href="<?php the_permalink(); ?>"> <span class="read_more">Read More</span> </a> </p>
</div>
</div>
</div>
<?php if ($counter % 3 == 0) {
echo '</div><div class="row">';
} ?>
<?php
endwhile;
endif;
?>
</div> <!--Inner div ROW-->
</div> <!--Main Div ROW-->
</div> <!--Main Div ROW-->
</div> <!--Container-->
<?php // get_sidebar(); ?>
<?php get_footer(); ?>
最佳答案
我可能会这样做:
<div class="col-md-4 col-sm-12">
content
</div>
请记住,这些类可以相互堆叠,以在 MD 尺寸的屏幕中获得 4 的宽度,在 SM 尺寸的屏幕中获得全宽 (12)。
希望我理解你的问题。
关于php - Bootstrap 列在 Wordpress 上发生冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48029225/