如何在Bootstrap行中有多个列

Question

我正在使用Bootstrap 3.我有一行将保存可变数量的列,范围从1-let's say 9.

当前设置为col-lg-4,因此三个应显示在一行上.我通常会创建一个新行,但由于我动态添加列,我不能这样做,或者至少不知道如何.

当我的客户添加帖子时,它会自动创建一个包含内容的列.

问题仅在于桌面和移动视图中的Firefox和IE.第4项(或应该转到下一行的第1项)被推到一个新行并被抵消.见下面的截图.

我使用ExpressionEngine作为我的CMS.

它在Chrome中完美显示.

代码如下

<div class="container">
        <div class="row">                   
            {exp:channel:entries channel="plans" orderby="title" sort="asc"}
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 centered">             
                <div class="grid mask">
                    <figure>
                        <img class="img-responsive" src="{plan_main_image}">
                        <figcaption>
                            <h5>{title}</h5>
                            <a data-toggle="modal" href="#{url_title}" class="btn btn-primary btn-lg">View Floor Plan</a>
                        </figcaption>
                    </figure>
                </div>
            </div>  
            <div class="modal fade" id="{url_title}" tabindex="-1" role="dialog" aria-labelledby="{url_title}" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">{title}</h4>
                    </div>
                    <div class="modal-body text-left">
                        <div class="row">   
                            <div class='list-group gallery'>
                                <div class="col-lg-4">
                                    <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_main_image}">
                                        <img class="img-responsive" alt="" src="{plan_main_image}" />
                                    </a>
                                </div>
                                <div class="col-lg-4">
                                    <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_first_level}">
                                        <img class="img-responsive" alt="" src="{plan_first_level}" />
                                    </a>
                                </div>
                                <div class="col-lg-4">
                                    <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_second_level}">
                                        <img class="img-responsive" alt="" src="{plan_second_level}" />
                                    </a>
                                </div>
                            </div>
                        </div>  
                        <div class="row">
                            <div class="col-lg-12">
                                {plan_description}
                            </div>
                        </div>  
                        <!--<div class="row">
                            <div class="col-lg-12">
                                <b><a href="{plan_floor_plan_pdf}" download="{plan_floor_plan_pdf}">Download the floor plan</a></b>
                            </div>
                        </div>-->                                                     
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
              </div><!-- /.modal -->
            {/exp:channel:entries}                                                      
        </div><!-- /row -->
        <br>
        <br>            
    </div><!-- /row -->
</div><!-- /container -->

谢谢

Answer 1

这是因为第一张图像比其他图像略高.您需要使用响应列重置.请参阅文档中的响应列重置.

基本概念是在包含clearfix的每个水平分组之后添加div,以便在之前清除下一个水平分组并正确对齐.

对于更复杂的场景,您可以在此处看到我的答案: Bootstrap中的Gap堆叠行.