Html 代码正在使用引导中的col将第二行弄乱

有人能告诉我我在这个代码中做错了什么吗？我有一个联系人页面，它使用相同的代码，只是循环查询。但由于某种原因，第二排有一个巨大的间隙，好像有什么东西挡住了它

呈现HTML

<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
        <!-- Insert Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">

                            <div class="m-t-xs font-bold">Extension 4854</div>

                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong></strong></h4>
                        <h5>
                            <strong>IT Support Technician</strong><br><br>
                            <i class="fa fa-map-marker"></i> IT Department<br>
                            MCTC Desoto Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">

                            <div class="m-t-xs font-bold">Extension 4814</div>

                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong></strong></h4>
                        <h5>
                            <strong>OPS</strong><br><br>
                            <i class="fa fa-map-marker"></i> CSAD Department<br>
                            MCTC Desoto Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">

                            <div class="m-t-xs font-bold">Extension 4856</div>

                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong>David Brierton</strong></h4>
                        <h5>
                            <strong>IT Support Technician</strong><br><br>
                            <i class="fa fa-map-marker"></i> IT Department<br>
                            MCTC Desoto Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">

                            <div class="m-t-xs font-bold">Extension 4881</div>

                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong></strong></h4>
                        <h5>
                            <strong>Associate III</strong><br><br>
                            <i class="fa fa-map-marker"></i> CSAD Department<br>
                            MCTC Desoto Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/jpg">

                            <div class="m-t-xs font-bold">Extension 4881</div>

                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong></strong></h4>
                        <h5>
                            <strong>Associate I</strong><br><br>
                            <i class="fa fa-map-marker"></i> CSAD Department<br>
                            MCTC Desoto Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">

                            <div class="m-t-xs font-bold">Extension 4886</div>

                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong></strong></h4>
                        <h5>
                            <strong>OPS</strong><br><br>
                            <i class="fa fa-map-marker"></i> Operations Department<br>
                            MCTC Desoto Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/jpg">

                            <div class="m-t-xs font-bold">Extension 4866</div>

                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong></strong></h4>
                        <h5>
                            <strong>QA Support Analyst</strong><br><br>
                            <i class="fa fa-map-marker"></i> QA Department<br>
                            MCTC Desoto Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">

                            <div class="m-t-xs font-bold">Extension 4881</div>

                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong></strong></h4>
                        <h5>
                            <strong>OPS</strong><br><br>
                            <i class="fa fa-map-marker"></i> Desoto Department<br>
                            MCTC Desoto Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
          </div>
       </div>

---

此部分存在问题：

<div class="col-sm-4">
     <div class="text-center">
           <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
             <cfif len(grab_contacts.phone_extension)>
           <div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
             </cfif>
     </div>
</div>

分机#抓取联系人。电话#分机#

---

您需要将新列集换行。您的框位于行包装器中，但框的内容缺少列的行包装器，因此在循环时，引导不会将正确的布局/定位样式应用于框内的列。基本上，只需将框内容的嵌套列包装在一个row类中。

在

.row

div中应该只有3个'col-lg-4'，总共12个。在循环中包含

。参见添加的代码片段（将

col-lg-4

更改为

col-xs-4

以了解效果）

发布呈现的HTML和CSS。不要将

div

元素放在

a

元素中。这不是一个好的实践，我认为它不会验证W3CValidator@cale_b-这在HTML5中是有效的。例如，如果要嵌套列，通常应该在嵌套列中使用一行，而没有正确清除浮动。这很可能就是您在网格中看到这种行为的原因。在适当的断点处清除适当数量的列。查看您正在查看的页面的宽度（以像素为单位）？col-lg-x类将以1170px的窗口宽度分成单独的行。你找到答案的答案了吗？

<div class="col-sm-4">
     <div class="text-center">
           <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
             <cfif len(grab_contacts.phone_extension)>
           <div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
             </cfif>
     </div>
</div>