如何使用 Bootstrap 隱藏響應式佈局中的元素？

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

正如您所注意到的，Bootstrap 為較小螢幕上折疊導航選單項目提供了本機支援。然而，在類似的情況下，您可能還想隱藏頁面上的其他元素。

介紹 Bootstrap 的可見性類

為了解決這一需求，Bootstrap 提供了一組可見性允許您根據螢幕尺寸控制元素的存在的類別。這些類別包括：

• visible-xs-block、hidden-xs：隱藏超小型裝置（小於 768 像素）上的元素。
• visible-sm-block、hidden-sm：在小型裝置（768px以上）上隱藏元素。
• visible-md-block、hidden-md：在中等設備上隱藏元素設備（992 像素以上）。
• visible-lg-block、hidden-lg：隱藏大型裝置（1200 像素以上）上的元素。

用法

要在小螢幕上隱藏元素，只需向其添加適當的隱藏類別即可。例如，要隱藏您提到的導航藥丸，您可以使用以下內容：

<code class="html"><ul class="nav nav-pills navbar-right hidden-sm">
  ...
</ul></code>

其他選項

在 Bootstrap 4中，還有兩種附加型別可見性類：

• hidden-*-up：當視口位於給定斷點或更寬時隱藏元素。
• hidden-* -down：當視口位於給定斷點或更小時，隱藏元素。

注意：舊版的 Bootstrap 使用 .hidden-phone 和 .hidden-phone 等類。 visible-tablet，現已過時。

結論

透過利用 Bootstrap 的可見性類，您可以有效地管理元素在不同螢幕尺寸上的顯示。這種多功能性使您能夠創建能夠優雅地適應不同設備尺寸的響應式佈局。

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