twitter-bootstrap-3 - 如何在 Bootstrap 行中有多个列

Question

我正在使用 Bootstrap 3。我有一行将包含可变数量的列，范围从 1 到假设 9。

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

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

问题仅出在 Firefox 和 IE 中，在桌面和移动 View 中都是如此。第 4 个项目(或应该转到下一行的第一个项目)被推到一个新行并被偏移。请参见下面的屏幕截图。

我正在使用 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

这是因为第一张图片比其他图片略高。您需要为此使用响应列重置。参见 Responsive Column Resets在文档中。

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

对于更复杂的场景，您可以在此处查看我的答案:Gap in Bootstrap stacked rows .