用 Bootstrap 設計 RWD 頁面的幾個小技巧

各尺寸的簡易理解

• 無：全面套用，通常設定後給手機畫面使用
• sm：手機橫放之後
• md：平板電腦
• lg：平板電腦橫放
• xl：桌上電腦 PC

各裝置大小有異，但大方向是這樣。我自己是比較少用 sm，手機不常橫放瀏覽網頁。

將大量元素以4個為一排的時候

原本我都是寫 <div class="col-md-3"> ，覺得很夠用，在手機上會垂直堆疊，PC 上會4個一排

之後我發現寫 <div class="col-md-6 col-lg-4 col-xl-3"> 會更好

• 手機上會堆疊
• 平板上會2個一排
• 平板橫放會3個一排
• PC 上會4個一排

關於 1:3 的頁面排版

有側邊欄的 1:3 頁面排版很常見，我以前都是寫

<div class="col-md-3">...</div>
<div class="col-md-9">...</div>

之後發現在平板上，橫放時還好，直立時 1:3 的側邊欄會太細。用 lg 比較好。

<div class="col-lg-3">...</div>
<div class="col-lg-9">...</div>