需要删除常见问题解答之间的额外空白区域。使用CSS和Bootstrap

Question

我有一个包含文本块的FAQ页面。单击“阅读更多”时，文本将展开。我正在使用Bootstrap，Wordpress和CSS。常见问题解答的顺序无关紧要。它可以是任何顺序。

问题： 当您单击“阅读更多”时，它会创建大量空白区域。我想删除这个空间。我认为这可能是一个问题。我希望常见问题解答看起来不错，并且它们之间有相同的空间。

我是bootstrap的新手，不知道什么是最好的方法。我不必为此页面使用bootstrap网格。如果有更好的方法，那也很好。

    <div class="row">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
               <div class="col-lg-4 col-sm-6">
                  <div class="faq-all">
                    <div class="faq-item">
                        <h2><?php the_title(); ?></h2>
                        <article>
                          <div class="faq-intro">
                             <?php the_content(); ?>
                          </div>
                          <div class="faq-info">
                             <?php the_content(); ?>
                          </div>   
                          <div class="faq-link">
                            <a href="#" class="read-more">LES HELE SVARET</a>
                            <a href="#" class="read-less">LES MINDRE</a>
                        </div>
                       </article>
                    </div>
                  </div>
               </div>
                <?php endwhile; ?>
            </div>

提前致谢。

Answer 1

行最多可包含12列。您必须计算要创建的项目数，以正确创建最多12列的多行。 白色空间可能是由于（相应于屏幕）你有一个单行5 div，每个在lg屏幕中有4列，在sm屏幕中有6列，即单行中5 * 4 = 20列在lg屏幕中，在sm屏幕中有5 * 6 = 30列。