我真的对这个引导网格问题感到困惑。从下面的截图(来源:http ://uforest.org/Species/C/Callerya_atropurpurea.php )。标题“参考”在 md 和 sm 的大小处超出了网格对齐。
从下面的代码可以看出,References 的网格布局和下面的引文都在 col-lg-12 下。这嵌套在 col-md-9 的列中。“参考”已改为跳到另一个 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>