Bootstrap嵌套网格对齐问题
问题描述:
我真的很困惑这个引导网格问题。从下面的截图(来源:http://uforest.org/Species/C/Callerya_atropurpurea.php)。标题“References”已经超出了其网格对齐,大小为md & sm。Bootstrap嵌套网格对齐问题
正如你可以从下面的代码中看到,对于参考网格布局及以下的被引次数均在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建议添加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>
答
只需添加clearfix
类h4
像
<h4 class="clearfix">References</h4>
测试工作。
玩得开心。
答
你应该把这些放在一排。这将创造你正在寻找的休息。所以,像https://www.bootply.com/fBHELKjoGD
+0
不幸的是,它不起作用。 :(我尝试将bootstrap代码的原始块粘贴到bootply中,并且它很好地显示在那里。似乎它不能被复制或者图像导致问题 – Jake
不幸的是,这不工作太...... :(这似乎是当我删除照片,引用将显示没有问题。但是我有一些页面有完全相同的配置的照片,但没有问题的那些...... – Jake
说实话,它应该工作 –
好吧,我试过......但是,然后再次......我在我的照片中添加了clearfix到div标记,并且它神奇地将参考文献向下推。 ..哈哈... – Jake