雖然說Bootstrap的網格系統相當的方便好用，但只要區塊內的元素大小不一致時，就會造成跑版的問題，雖然Bootstrap也有提供長短腳的解決方法，但就得去計算出，每滿12個單位數時，加入一個長短腳的修正，所以當元素有長有短時，或許改用瀑布流是一個不錯的方式。
但要如何將瀑布流的套件與Bootstrap網格系統整合在一塊，其實方法很簡單，當整合後不但讓Bootstrap的網格支援瀑布流排版，同時還能透過Bootstrap內建的網格規則，來控制瀑布流的行列數，至於要怎麼在Bootstrap中使用Masonry套件，現在就一塊來看看吧！
Step1
首先，先在body中加入bootstrap的html網格標籤。
[html]
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="01.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="02.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="03.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="04.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
[/html]
Step2
由於圖片有直有橫，這時就會造成跑版的問題。
Step3
接著在/body前，加入下方的script。
[javascript]
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
$(function(){
$(‘.masonry’).masonry({
itemSelector: ‘.item’
});
</script>
[/javascript]
Step4
再把row後加入「masonry」，以及把col-md-3後再加入「item」。
[html]
<div class="row masonry">
<div class="col-md-3 item">
[/html]
Step5
完成後，這時版型就支援瀑布流的排版了。
Step6
當把col-md-3改成col-md-6，這是瀑布流就會變成二欄式，因此透過Bootsrap內建的網格數，就可任意的調整瀑布流的欄位數，是不是超方便的呀！
