跳到主要內容

發表文章

目前顯示的是 6月, 2021的文章

解決php程式迴圈使用Bootstrap框架排版內容高度無法一致的問題 -教學撰寫:徐嘉裕Neil hsu

使用Bootstrap框架排版來跑php迴圈,除非是要做瀑布流,一定會遇到以下的問題,就是每個div的高度都不一致,導致區塊跑位的情況 這樣不是很奇怪嗎?解決方法就使用js的each取得nth-child引響範圍內區塊高度的最大值,再輸出到範圍內的全部區塊,例如每列有三個區塊,迴圈跑三次共三列,程式就會以每三個區塊取值比對一次抓出最大高度在輸出,這樣每一列的高度都會一致,不會再發生區塊跑位的情況。 方法如下: html結構 <div class="row">   <div class="col-md-4">.col-md-4</div>   <div class="col-md-4">.col-md-4</div>  <div class="col-md-4">.col-md-4</div>   <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> 呼叫function <script>sameheightfunction();</script> js-code 吧以下的code放在頁面引入的js檔中 //區塊高度相等 function sameheightfunction() {   var $column=3; //欄位數   var $range = $column - 1;   var $sections = $('.col-md-4');  //區塊class   $sections.filter(':nth-child(' + $column + 'n-' + $range + ')').each(function() {     var $this = $(this),       $els = $this.nextAll(':lt(' + $range + ')&