Bootstrap 嵌套网格对齐问题

Question

我对这个 bootstrap 网格问题感到很困惑。来自下面的屏幕截图（来源：http://uforest.org/Species/C/Callerya_atropurpurea.php）。 header "References" 超出了 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>

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

谢谢！

[已解决] 感谢@Prince sodhi 建议添加 class 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

只需将 class clearfix 添加到 h4 就像

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

经过测试和工作。

玩得开心。

Answer 2

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

Bootstrap 嵌套网格对齐问题

Bootstrap nested grid alignment issue

twitter-bootstrap

bootstrap-grid