使用 Bootstrap 3/Bootstrap 4 顯示/隱藏 HTML 元素

 

BS3 BS4
visible-xs d-block d-sm-none
visible-sm d-none d-sm-block d-md-none
visible-md d-none d-md-block d-lg-none
visible-lg d-none d-lg-block d-xl-none
visible-xl d-none d-xl-block
hidden-xs d-none d-sm-bloc
hidden-sm d-block d-sm-none d-md-block
hidden-md d-block d-md-none d-lg-block
hidden-lg d-block d-lg-none d-xl-block
hidden-xl d-block d-xl-none
BS4
d-none d-sm-block
d-none d-md-block
d-none d-lg-block
d-none d-xl-block
d-none
d-sm-none
d-md-none
d-lg-none
d-xl-none

 

使用 Bootstrap 4 顯示/隱藏 HTML 元素

內容出處: 使用 Bootstrap 4 顯示/隱藏 HTML 元素

[Bootstrap 3] 格狀系統 Grid System

其中xs代表裝置寬度小於768px(手機裝置),
sm代表大於768px且小於992px(平板),
md代表大於992px且小於1200px(筆電),
lg代表大於1200px(外接螢幕,桌機)。

其中xs代表裝置寬度小魚768px(手機裝置),sm代表大於768px且小於992px(平板),md代表大於992px且小於1200px(筆電),lg代表大於1200px(外接螢幕)。

內容出處: [Bootstrap 3] 格狀系統 Grid System