Twitter bootstrap 3 如何在引导行中有多个列

我使用的是bootstrap3。我有一行可以容纳不同数量的列，从1到9不等

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

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

问题只存在于Firefox和IE中，无论是桌面视图还是移动视图。第四项（或应转到下一行的第一项）被推送到新行并被偏移。请参见下面的屏幕截图

我使用ExpressionEngine作为我的CMS

它在铬合金上显示得非常完美

代码如下

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

{exp:channel:entries channel=“plans”orderby=“title”sort=“asc”}
{title}
&时代；
{title}
{计划描述}
接近
{/exp:channel:entries}

谢谢

---

原因是第一张图像比其他图像略高。为此，您需要使用响应列重置。见文件

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

---

对于更复杂的场景，您可以在这里看到我的答案：。

显示您的HTML或引导层。抱歉，我刚刚编辑了它。原因是第一张图像比其他图像稍高。为此，您需要使用响应列重置。请参见此处：。有关更复杂的场景或更多详细信息，请参见我的回答：在上面进行扩展，这是常见的浮动行为。当所有高度不完全相同时，您可以将其排成一行，或使用响应的clearfix清除它，或使用砌石或等效脚本。与EE无关。这是一个清算问题。为了做你想做的事情，这些盒子的高度必须相同，因为你不知道把clearfix放在哪里，这和把它包装成一行是同一个问题。