Bootstrap嵌套网格对齐问题

-1

我真的很困惑这个引导网格问题。从下面的截图（来源：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>

来源

2017-06-19 Jake

只需添加clearfix类h4像

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

测试工作。

玩得开心。

来源

2017-06-19 13:44:19

不幸的是，这不工作太...... :(这似乎是当我删除照片，引用将显示没有问题。但是我有一些页面有完全相同的配置的照片，但没有问题的那些...... – Jake

说实话，它应该工作 –

好吧，我试过......但是，然后再次......我在我的照片中添加了clearfix到div标记，并且它神奇地将参考文献向下推。 ..哈哈... – Jake

你应该把这些放在一排。这将创造你正在寻找的休息。所以，像https://www.bootply.com/fBHELKjoGD

来源

2017-06-19 13:46:59 Harley

不幸的是，它不起作用。 :(我尝试将bootstrap代码的原始块粘贴到bootply中，并且它很好地显示在那里。似乎它不能被复制或者图像导致问题 – Jake

Bootstrap嵌套网格对齐问题

回答

相关问题