Bootstrap教學-Bootstrap讓網格系統內的多個div高度相同

梅問題-Bootstrap教學-Bootstrap讓網格系統內的多個div高度相同
  以前使用Table排版,當一列有三個區塊時,Table會依最三個裡面內容元素最多的高度為主,並將其它二個區塊也一併撐高,但到了DIV版本時,若想要將二個DIV等高,除了將DIV原來的屬性變成table外,不然就是使用javascript,而最近梅干發現一個更簡單的方式,就能將多個DIV變成等高,同時還能套用在Bootstrap的網格系統中,並還支援各瀏覽器,因此也有在使用Bootstrap套件的朋友,現在也一塊來看看,如何將Bootstrap的網格系統中,也讓裡面的DIV變成等高。
Step1
在row層中,再包覆一個equalheight的DIV。
<div class="container">
  <div class="row">
    <div id="equalheight"></div>
  </div>
</div>

Step2
接著在equalheight的div中,開始使用Boostrap的網格。
<div id="equalheight">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>

</div>

Step3
完成後,再每個col-md-*中,再用ehdiv包覆,並在div內就可加入內容。
<div class="col-md-4">
  <div class="ehdiv"></div>
</div>
<div class="col-md-4">
  <div class="ehdiv"></div>
</div>
<div class="col-md-4">
  <div class="ehdiv"></div>
</div>

Step4
最後再加入style,這樣就大功告成囉。

.ehdiv{
 margin-bottom: -10000px;
 padding-bottom: 10000px;
 background-color:#efefef;
}

#equalheight {
 overflow: hidden;
}


Step4
完成後,在一般的桌機尺寸時,DIV則會等高,當變成切換成行動版尺寸時,區塊則會自動縮回原先的大小。
梅問題-Bootstrap教學-Bootstrap讓網格系統內的多個div高度相同
[範例預覽] [範例下載]

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 4 梅留言

  • 第1梅
    陳宥瑾 說道:

    我找到解決辦法了,就是用下面的javascript,但也不算很完美,問題在這是把全部的欄位都設成同樣高度,
    而不是針對row中的欄位

    @section Scripts {

    $(document).ready(function () {
    var heights = $(“.well").map(function () {
    return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(“.well").height(maxHeight);
    });

    }

近期講座

近期講座

更多講座