引导列在 Wordpress 上发生冲突答案

【问题标题】：Bootstrap Columns colliding on Wordpress引导列在 Wordpress 上发生冲突
【发布时间】：2018-06-10 06:50:55
【问题描述】：

我正在创建一个theme，并且在创建了 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(); ?>

【问题讨论】：

标签： php html css wordpress twitter-bootstrap

【解决方案1】：

我可能会这样做：

<div class="col-md-4 col-sm-12">
  content
</div>

请记住，这些类可以相互堆叠，以在 MD 尺寸的屏幕中获得 4 的宽度，在 SM 尺寸的屏幕中获得全宽 (12)。

希望我能理解您的问题。

【讨论】：