需要删除常见问题之间的额外的空白。使用CSS和Bootstrap [英] Need to remove extra white space between FAQ's. Using CSS and Bootstrap

问题描述

我有一个包含文本块的常见问题页面。当您点击阅读更多，文本展开。我使用Bootstrap，Wordpress和CSS。 FAQ的顺序无关紧要。它可以是任何顺序。

I have a FAQ page with blocks of texts. When you click read more, the text expand. I am using Bootstrap, Wordpress and CSS. The order of the FAQ's does not matter. It can be in any order.

问题：
当您点击阅读更多，它创建了大量的空白。我想删除这个空间。我认为这可能是一个问题。我想要常见问题，看起来不错，它们之间有相同的空间。

The problem: When you click read more, it create a lot of white space. I would like to remove this space. I think it might be a row issue. I want the FAQ's to look nice and have the same amount of space between them.

我是新的bootstrap，不知道什么是最好的方法。我不必为此页使用引导网格。如果有更好的方法，这将是伟大的。

I am new to bootstrap and not sure what is the best approach. I don't have to use bootstrap grids for this page. If there is a better way of doing this, that would be great too.

    <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>

提前感谢。

推荐答案

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

row can contain up to 12 columns. You have to count how many item you are creating to correctly create multiple rows with at most 12 columns. The white space may be due to the fact that (accordingly to the screen) you have a single row with 5 div, each with 4 column in lg screen and 6 in sm screens, that is 5*4 = 20 columns in a single row in lg screens and 5*6 = 30 columns in sm screens.

这篇关于需要删除常见问题之间的额外的空白。使用CSS和Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！