https://blog.poychang.net/visible-and-hidden-in-bootstrap-4/

Bootstrap 千呼萬喚來到了 v4 beta,裡面除了提供更好看的元件外,以提供了許多好用個工具,讓排版變得更輕鬆,這對 CSS 苦手的我,真是一大福音,但是使用的時候發現一個問題,前幾版都有的 visible 和 hidden 類別好像變得不容易用了…

在 Bootstrap 3 的時候,有 Responsive Utilities 讓我們控制響應式顯示,可以參考下表來設定。

Bootstrap 3 - Responsive Utilities

很方便對吧!

到了 Bootstrap 4-alpha 的時候,改成用 Display Property 來做控制,而 Bootstrap 4 Beta 也依照這樣的方式繼續走下去。

這樣做也不會說不好,保留了更多彈性去使用,只是對我這位 CSS 苦手來說有一點不直覺,所以整理了最下面的表格,方便我之後使用。

Display 通用類別

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

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

搭配響應式的類型做變化

有了 Display 通用類別,再搭配響應式的設定,就可以做出響應式顯示/隱藏 HTML 元素的功能。

BS 3BS 4備註
hidden-xs-downd-none d-sm-block
hidden-sm-downd-none d-md-block
hidden-md-downd-none d-lg-block
hidden-lg-downd-none d-xl-block
hidden-xl-downd-none(same as hidden)
hidden-xs-upd-none(same as hidden)
hidden-sm-upd-sm-none
hidden-md-upd-md-none
hidden-lg-upd-lg-none
hidden-xl-upd-xl-none
hidden-xsd-none d-sm-block(only)
hidden-smd-block d-sm-none d-md-block(only)
hidden-mdd-block d-md-none d-lg-block(only)
hidden-lgd-block d-lg-none d-xl-block(only)
hidden-xld-block d-xl-none(only)
visible-xsd-block d-sm-none(only)
visible-smd-none d-sm-block d-md-none(only)
visible-mdd-none d-md-block d-lg-none(only)
visible-lgd-none d-lg-block d-xl-none(only)
visible-xld-none d-xl-block(only)

整理完後,仿造原本的表格樣式做一個對照表。