使用Bootstrap的朋友，應該對於它的GridSystem網格系統不陌生，同時也是Bootstrap最核心的應用，由於內建的網格系統相當的易懂好上手，所以透過內建的網格系統，就能快速的設計出RWD自適應的網頁，而這個網格系統，已經省掉大把自刻一千多行的CSS時間，因此只需依照它所提供的結構與標籤名稱，就能讓版面實現自動縮收版排的機制。
由於內建的網格系統，會依照指定的比例進行縮放調整，而這只針對於寬度的部分，高度則是依照區塊內容的多寡而自動延展，但最近梅干遇到一個小問題，那就是要讓DIV的區塊以正方式呈現，就有點像Windows10方塊磚的效果，由於是自適應，因此也無法將高度設死，因此梅干爬了好多文，總於找到解決辦法，讓在套用Bootstrap的網格系統時，也能實現正方形的區塊，至於要怎麼作，現在就一塊來看看吧！
Step1
首先，先建立好所需的網格數，並且在每個col的欄位中，再加入二個div，分別為dummy與block。
[html]
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="dummy"></div>
<div class="block"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="dummy"></div>
<div class="block"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="dummy"></div>
<div class="block"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="dummy"></div>
<div class="block"></div>
</div>
</div>
</div>
</div>
[/html]
Step2
加入CSS設定，同時比較特別的是，原本區塊與區塊間，Bootstrap內建是左右各15像素，現在則透過block的top、right、bottom、left來作設定。
[css]
.dummy {
margin-top: 100%;
}
.block{
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background: #222;
}
[/css]
Step3
完成後，就會看到，畫面有四個色塊，同時會以寬度的比例，作等比放大，變為正方形。
Step4
只要重覆步驟1，就可在一個大區塊中，再分割出四個小區塊來。
Step5
最後再每個區塊中，加入背景圖片，並使用CSS3的背景居中屬性。
[css]
.bg1{
background: url(01.jpg) center center;
background-size: cover;
}
[/css]
Step6
再把剛所設定好的背景CSS樣式，加到block的div中。
[html]
<div class="block bg1"></div>
[/html]
Step7
都完成後，就會看到DIV的區塊，雖然是空元素，但區塊卻是以正方形進行縮放，即便到手機下也是一樣保有正方形的區塊，是不是超酷呀！因此下回當遇到DIV要等比縮放時，不妨可試試喔！
[範例預覽-1] [範例預覽-2] [範例預覽-3] [範例下載]