Bootstrap 4顯示隱藏Grid指令對照表

Bootstrap 4雖然說效能比較佳,但是使用起來的直覺性還是比不上Bootstrap 3,但世界就是不斷往前的推進,這篇文章就是單純的把適性化(Responsive)系統的Grid顯示或隱藏整理成矩陣表,供給日後使用時可參考。

Bootstrap 4顯示/隱藏類別矩陣表

Extra small
(<576px)
Small
(≥576px)
Medium
(≥768px)
Large
(≥992px)
Extra large
(≥1200px)
.d-none .d-sm-block Hidden Visible Visible Visible Visible
.d-none .d-md-block Hidden Hidden Visible Visible Visible
.d-none .d-lg-block Hidden Hidden Hidden Visible Visible
.d-none .d-xl-block Hidden Hidden Hidden Hidden Visible
.d-none Hidden Hidden Hidden Hidden Hidden
.d-sm-none Visible Hidden Hidden Hidden Hidden
.d-md-none Visible Visible Hidden Hidden Hidden
.d-lg-none Visible Visible Visible Hidden Hidden
.d-xl-none Visible Visible Visible Visible Hidden

※ 如果是表格的話,可以把block關鍵字取代成table-cell關鍵字,例如:「.d-none .d-md-table-cell」。

參考連結:

  1. Bootstrap 4讓特定元素在特定的裝置畫面中消失
  2. 詳細Notation語法請見Bootstrap官方頁面:Display property
BS4 BS3 ResponsiveUtility GridSystems Show Hide MediaQuery