Twitter bootstrap 引导嵌套网格对齐问题

我真的对这个引导网格问题感到困惑。从下面的屏幕截图（来源：）。标题“引用”已超出其网格对齐，大小为md&sm

从下面的代码可以看出，参考文献的网格布局和下面的引文都在col-lg-12下。它嵌套在col-md-9的一列中。“References”则跳入另一列col-md-3

<!-- References -->
<div class="col-lg-12">
    <h4>References</h4>
        LaFrankie JV, SJ Davies, LK Wang, SK Lee & SKY Lum. (2005) Forest Trees of Bukit Timah: Population Ecology in a Tropical Forest Fragment. Simply Green, Singapore. 178 pp.......           
        <br><br><br>
        <span style="float:right;"><small>Posted Date: 2012-11-27 / Modified Date: 2015-01-11</small></span>
 </div>

工具书类
LaFrankie JV、SJ Davies、LK Wang、SK Lee和SKY Lum。（2005）Bukit Timah的森林树木：热带森林片断中的种群生态学。简单的绿色，新加坡。178页。。。。。。。




发布日期：2012-11-27/修改日期：2015-01-11

有人知道为什么吗？这个布局适用于我的所有其他200页，并且只有2个这样的实例

谢谢

[已解决] 感谢@Prince sodhi建议添加clearfix类。我把它添加到一个div标签上，上面有照片，解决了这个问题

<!-- Photos -->
<div class="clearfix">
    <div class="col-sm-6 img-portfolio">
        <img class="img-responsive img-rounded" src="../../images/callerya_atropurpurea1.jpg" alt="">
        <p><small>The leaflets are droopy, glossy, and bend upwards at the mid-ribs.</small></p>
    </div>

    <div class="col-sm-6 img-portfolio">
        <img class="img-responsive img-rounded" src="../../images/callerya_atropurpurea2.jpg" alt="">
        <p><small>The Purple Milletia always have a dense crown of canopy.</small></p>
        </div>

    <div class="col-sm-6 img-portfolio">
        <img class="img-responsive img-rounded" src="../../images/callerya_atropurpurea3.jpg" alt="">
        <p><small>The purple flowers, and developing fruits at the base.</small></p>
    </div>
</div>

小叶下垂，有光泽，中间肋骨向上弯曲

紫色粟属植物总是有一个浓密的树冠

紫色的花，底部正在发育的果实

只需将class

clearfix

添加到

h4

中即可

<h4 class="clearfix">References</h4>

参考资料

测试和工作

---

玩得开心。

你应该把它们排成一行。这将创造你想要的休息。因此，…类似于

的东西不幸的是，它不起作用：（我尝试将原始的引导代码块粘贴到bootply中，它在那里显示得很好。看起来它无法复制，或者映像导致了问题，但这也不起作用……：（好像当我删除照片时，引用将显示无问题。然而，我有一些页面具有完全相同的照片配置，但这些页面没有问题…好吧，我尝试了…但再次…我将clearfix添加到我照片的div标签上，它神奇地将引用向下推…哈哈…将标记为正确和a。）对我的问题进行编辑以使其更清晰…感谢您在一夜之间解决了我的两个bug；）