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嵌套網格對齊問題

回答

相關問題