Bootstrap verschachtelte Gitterausrichtung Problem

Question

Ich bin wirklich perplex über dieses Bootstrap-Grid-Problem. Aus dem folgenden Screenshot (Quelle: http://uforest.org/Species/C/Callerya_atropurpurea.php). Der Header "References" ist aus seiner Rasterausrichtung in der Größe von md & sm gegangen.

Wie Sie aus dem Code unten sehen können, das Raster-Layout für Referenzen und die folgenden Zitate sind alle unter col-lg-12. Dies ist in einer Spalte von col-md-9 verschachtelt. "Referenzen" ist stattdessen in die andere Spalte col-md-3 gesprungen.

<!-- 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> 

Weiß jemand warum? Dieses Layout funktionierte für alle meine anderen 200 Seiten, und es gibt nur 2 solcher Instanzen.

Danke!

[Gelöst] Dank @Prince Sodhi für das Hinzufügen der Klasse Clearfix vorschlagen. Ich habe es zu einem der div-Tags hinzugefügt, in denen die Fotos untergebracht sind, und es hat das Problem gelöst.

<!-- 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

fügen Sie einfach Klasse clearfix-h4 wie

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

getestet und arbeitete.

viel Spaß.

Answer 2

Sie sollten diese in einer Reihe setzen. Das wird die Pause schaffen, die du suchst. So etwas wie https://www.bootply.com/fBHELKjoGD