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

BS4 BS3 ResponsiveUtility GridSystems Show Hide MediaQuery