如何使用引導jQuery來對齊三個div來滿足響應速度？

Question

嗨，大家好我在這裏有一個問題，我想顯示三個div。

的出放假設是這樣的下面

分配的要求說。
根據提供的模型開發單頁面響應網站。桌面版本將填充用戶瀏覽器的整個高度。移動設備將各部分疊加在一起。就功能而言，點擊圖標（騎自行車，購物車，刀叉或美術設計之旅）將滑出包含其他信息的中間白色面板。日期輸入字段將包含您選擇的javascript/jQuery日期選擇器。

我在鏈接可用電流低於項目
https://www.dropbox.com/s/igxahc9x19pcbfb/maboneng.zip?dl=0

請幫我傢伙。

Answer 1

這應該很容易使用bootstrap grid system。

您需要將所有三個div包裝在一個容器中，然後您可以添加網格類來說明它們應該如何在某些設備上呈現。

要說他們應占用中等或更小設備上的頁面的全部寬度，您需要添加類col-md-12要說在較大的設備上它應占用第三位，則將12除以3並添加該類：col-lg-4

所以，現在你是喜歡

<div class="container"> 
    <div id="yourWrapper" class="row"> 
     <div id="panel1" class="col-md-12 col-lg-4">your html</div> 
     <div id="panel2" class="col-md-12 col-lg-4">your html</div> 
     <div id="panel3" class="col-md-12 col-lg-4">your html</div> 
    </div> 
</div> 

最後在尋找的東西，讓他們承擔100％的高度，只需添加height:100vh;您的每一個的div

#yourWrapper > div {height:100vh;}