如何控制 Bootstrap 響應式佈局中的元素可見度？

隱藏 Bootstrap 響應式佈局中的元素

透過優化各種螢幕尺寸上的內容可見性來增強您的 Bootstrap 設計。 Bootstrap 提供了在較小裝置上顯示選單項目的功能，但是其他頁面元件呢？

為了解決這個問題，Bootstrap 提供了「可見」和「隱藏」類，使您能夠根據螢幕動態顯示或隱藏元素尺寸。可用的類別包括：

可見類：

• .visible-xs-block：在超小型裝置（手機）上顯示
• .visible-sm-block：在小型設備（平板電腦）上顯示
• .visible-md-block：在中型設備（桌上型電腦）上顯示
• .visible-lg- block：在大型設備上顯示設備（桌面）

隱藏類別：

• .hidden-xs：在超小型設備（手機）上隱藏
• .hidden-sm：在小型設備（平板電腦）上隱藏
• .hidden-md：在中型設備（桌上型電腦）上隱藏
• .hidden -lg：在大型設備（桌上型電腦）上隱藏

要在較小的螢幕上隱藏導航藥丸，只需將.hidden-xs 類別新增至對應的容器即可。

<code class="html"><div class="nav-pills hidden-xs float-right">...</div></code>

或者，您可以使用「hidden-*-down」 " 類，隱藏指定斷點或更小的元素。

<code class="html"><div class="nav-pills hidden-sm-down float-right">...</div></code>

如果要顯示指定斷點或更寬的元素，請記住使用“visible-*-up”類。 css/#responsive-utilities。

以上是如何控制 Bootstrap 響應式佈局中的元素可見度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！