close
梅問題．教學網

♣梅問題‧教學網【Minwt】♣

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

Posted: 28 Jan 2016 02:00 PM PST

梅問題－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高度相同
[範例預覽] [範例下載]
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 knoledge 的頭像
    knoledge

    討論

    knoledge 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄