bootstrap4 顯示隱藏

Show/hide for breakpoint and down:

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down (n/a 3.x) = d-none(same as hidden)

Show/hide for breakpoint and up:

hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (n/a 3.x) = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (n/a 3.x) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-none d-xl-block

 

==============

手機屏  col-2,    平板  col-sm , 桌面 col-md  大桌面 col-lg  

 

 

------------------------

 

Display 通用類別，可用於切換元件的顯示與否，並且能夠包含響應式設定，基本的變化以下：

CSS Class	說明
d-none	不顯示也不佔空間
d-inline	行內並排容器，大小以內容物斷定
d-inline-block	行內塊狀容器，大小以內容物斷定，可設定寬高、上下外距等屬性
d-block	塊狀容器，大小以空間斷定，可設定寬高、上下外距等屬性
d-table	表格容器
d-table-cell	表格元素容器
d-flex	塊級伸縮容器
d-inline-flex	行內級伸縮容器