Bootstrap嵌套网格对齐问题

Question

我对这个引导网格问题感到非常困惑。从下面的屏幕截图（来源：http://uforest.org/Species/C/Callerya_atropurpurea.php）。标题＆＃34;参考＆＃34;已经走出网格对齐的大小与md＆amp; SM。

从下面的代码中可以看出，参考文献的网格布局和下面的引文都在col-lg-12下。它嵌套在col-md-9的列中。 ＆＃34;参考文献＆＃34;而是跳进了另一个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>

有谁知道为什么？这个布局适用于我所有其他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>

Answer 1

只需将课程clearfix添加到h4，如

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

经过测试和工作。

玩得开心。

Answer 2

你应该将它们放在一行中。这将创造你正在寻找的突破。所以，......类似于https://www.bootply.com/fBHELKjoGD