Bootstrap顯示隱藏Grid指令對照表
Bootstrap 4雖然說效能比較佳，但是使用起來的直覺性還是比不上Bootstrap 3，但世界就是不斷往前的推進，這篇文章就是單純的把適性化（Responsive）系統的Grid顯示或隱藏整理成矩陣表，供給日後使用時可參考。
Bootstrap顯示／隱藏類別矩陣表
如果你想要讓某個元素/元件在某個裝置寬度下隱藏或顯示，那麼參考這篇文章就對了。
| Extra small （<576px） | Small （≥576px） | Medium （≥768px） | Large （≥992px） | Extra large （≥1200px） | Extra extra large （≥1400px） | |
|---|---|---|---|---|---|---|
| .d-none .d-sm-block | Hidden | Visible | Visible | Visible | Visible | Visible |
| .d-none .d-md-block | Hidden | Hidden | Visible | Visible | Visible | Visible |
| .d-none .d-lg-block | Hidden | Hidden | Hidden | Visible | Visible | Visible |
| .d-none .d-xl-block | Hidden | Hidden | Hidden | Hidden | Visible | Visible |
| .d-none .d-xxl-block | Hidden | Hidden | Hidden | Hidden | Hidden | Visible |
| .d-none | Hidden | Hidden | Hidden | Hidden | Hidden | Hidden |
| .d-sm-none | Visible | Hidden | Hidden | Hidden | Hidden | Hidden |
| .d-md-none | Visible | Visible | Hidden | Hidden | Hidden | Hidden |
| .d-lg-none | Visible | Visible | Visible | Hidden | Hidden | Hidden |
| .d-xl-none | Visible | Visible | Visible | Visible | Hidden | Hidden |
| .d-xx-none | Visible | Visible | Visible | Visible | Visible | Hidden |
特別提醒
如果是表格的話，可以把block關鍵字取代成table-cell關鍵字，例如：.d-none、.d-md-table-cell。
參考連結
- Bootstrap 4讓特定元素在特定的裝置畫面中消失
- 詳細Notation語法請見Bootstrap官方頁面：